“Stretch Section CSS” option not functioning correctly

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);
}

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.

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.