Missing padding for strechted containers on smaller screens

Dear support team,

I have a page with both a boxed container and a stretched container (Elementor).

Problem:
On smaller screens the left and right padding of the stretched container disappears. Please see screencast in the private content.

Desired result:
I want the stretched container to have the same padding on the left and right like the boxed container, WITHOUT having to manually enter padding values.

I also provided a login link. Feel free to deactivate plugins, but please reactivate them again after your work.

Hi wkmaster1985,

Thanks for reaching to us and take our apologies for the long delay in answering.

Please add the following Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile / tablet:

div[class*="wd-section-stretch"] {
    min-width: 100%;
    width: 100%;
    left: 0;
}

Best Regards,

Hi Hung,

thank you very much for your CSS code.

Unfortunately, this causes the lightgrey background of the container to appear boxed.
However, my goal is that the lightgrey background encompasses the full page width.
Please see the screenshot in the private content.

Hi wkmaster1985,

It caused by the Custom Width of general layout in Theme Settings > General > Layout https://prnt.sc/13AjaJytc0VF https://prnt.sc/kOt51jvFmxLL

Regards,

Hi Hung,

I don’t know what to make of this. Could you please adapt the section on the page (“THIS IS A STRETCHED CONTAINER”) in a way so that it has full width with a lightgrey background again and in addition has proper padding left and right when the viewport changes, just as the first section has (“THIS IS A BOXED CONTAINER”) ?

See my two screenshots in the private section.

I want both sections to look the same, with only the difference that the second section has a full-width lightgrey background. When the viewport goes smaller, I want both sections to always have the same paddings left and right, with the second section keeping its full-width lightgrey background. Could you please make the necessary adaptions to achieve this goal?

I appreciate your support.

[Hung Pham]

Hi wkmaster1985,

Thanks for reaching to us and take our apologies for the long delay in answering.

1. You can set Width to Content full width https://prnt.sc/tc9KkB36BKNf > https://prnt.sc/zh68NvW6cIUW but it will effects to the whole site.

2. In case you want to create additional for specific pages, then you can do it with our Theme Presets feature.

Then you can use Condition to select specific page > then click on Edit theme settings https://prnt.sc/aYNAEYxVQFU9

Here is our documentation on how to use theme presets. https://xtemos.com/docs-topic/theme-settings-presets/

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.site-content{
padding: 0;
}

Regards,

• This reply was modified 8 months, 3 weeks ago by Hung Pham.

[Author]

Posts