“Stretch Section CSS” option not functioning correctly

Hi,

I have an Elementor section that I want full width. I can’t use the JS stretch because I need margin on all sides. Using CSS stretch causes my section to move off the page to the right, and no margin settings will apply to the right side of the section.

This issue has been plaguing me for a very long time and I’ve solved it in other sections by applying a white border but that will no longer work in this case.

The problem is visible on the home page, above the fold background color. Link in private content.

Thanks

I’ve temporarily solved the issue by implementing the following change in ‘wd-section-stretch’, but please let me know if there is a better way.

[class*=”wd-section-stretch”] {
position: relative;
min-width: calc(98vw – var(–wd-scroll-w));
width: calc(98vw – var(–wd-scroll-w));
left: calc(50% – 50vw + var(–wd-scroll-w) / 2);
}

Hello,

There are two options “Stretch Section” in the default Elementor and in Woodmar, I wanted to check the settings.

You can send us the site admin access and page URL so that we could suggest a better option.

Best Regards

Admin settings are in the private content area.

You can remove the following code from the “Custom CSS” panel in theme options to test:

[class*=”wd-section-stretch”] {
position: relative;
min-width: calc(98vw – var(–wd-scroll-w));
width: calc(98vw – var(–wd-scroll-w));
left: calc(50% – 50vw + var(–wd-scroll-w) / 2);
}

I’m using the ‘CSS Stretch’ option in Woodmart Extras panel, not default Elementor JS stretch.

Hello,

Please check these options: https://gyazo.com/ac430815887557f8771b290d4f8dc377 and https://gyazo.com/87fa94f4cf6a612cf5e3ec02f123ae68

If you have any questions please feel free to contact us.

Best Regards

Yes, both “Full Width” and “Stretch Section” are enabled.

In your video you are editing the inner section, but my problem is with the parent section above the fold.

However, the issue is even very clear in your video. When you select “Stretch Section” or “Stretch Section and Content”, you can see the section stretches so far it goes off the right side of the page. If you enable that option, you will see that you cannot actually apply any ‘margin-right’. Top, left, and bottom margin settings work, but not right margin.

I have removed my CSS ‘band aid’ so you can see it on even the parent section when you try again.

Hello,

I have created a testing page, disabled the sidebar, and tested the feature.

Please look at the screen: https://gyazo.com/e068ba14f330bd71ff12eec410eb7939 the first blue row is stretchered.

This row does not have any margins or padding. You see the row is spread completely, while the content is also full with but with padding.

You need to remove all the paddings and margins and add the section by default, then you can set different paddings and margins for columns or inner sections.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts