Trouble with mlaw site template from design cloud

[skornweiss]

Hello,

I’m using the mlaw site template form design cloud but I’m not happy with the way the way the padding works as the browser size changes. There’s a cut point at 1440px at which the logos in the L margin disappear but there’s still padding that pushes some of the elements to the side. I’ve been trying to work with the custom css to create a single break point whereby the logos disappear and the padding goes away and all elements are centered and full width. can you help? Website is: https://kornstage.wpengine.com/

[tristup]

Hi Steven,

Thanks for reaching out.
We are not sure what exact problem you are having with the padding in the Lawyer template. And the Logo is also hidden in the specific screen size in the demo, you can check that at the following URL.

Lawyer by Themeco

If you still want to show the logo in the specific screen size, please add the following custom CSS code to Theme Options > CSS.

@media (max-width: 1400px)
{
    .x-brand
    {
        display:block;
    }
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[skornweiss]

The problem is that when the browser window is narrowed below 1440px (i think), the logo disappears but there is still padding that pushes the images towards the right side of the screen. It’s not until you get down to 900 something pixels that the elements on the site become full width. That in-between stage looks awkward.

[ruenel]

Hello Steven,

We will inform the developers of your feedback.

In the meantime, you can temporarily patch it by adding this custom CSS in Cornerstone > Theme Options > CSS.

@media (min-width: 1170px) and (max-width: 1440px){
   .site {
    padding-left: 3em;
    padding-right: 3em;
   }
}

Please Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[skornweiss]

I tried this code and it does not fix the issue - can you look at the site at all the different widths and see how bad the behavior is of different elements? I think it’s going to be a more complex fix - can you help?

[ruenel]

Hello Steven,

Please note that the code provided in the previous responses serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break.

You haven’t applied the code or already removed it. You can add !important for each padding value in the code and please do not remove it yet. You may have added it incorrectly which is why it is not working. Also, you must understand that the code above is just an example code as a starting point for you to modify the demo site.

Demo sites were designed purposely to give you a guide in starting to create your own site. They are considered as is as you download them from the DesignCloud. We only cover getting the demos setup, bug fixes, and minor cosmetic changes. As you modify the demo sites, it will become custom development which is no longer be within the scope of our support. You may need to hire a 3rd party developer if you are not familiar with coding.

Thank you for your understanding.