Overflow-x causes horizontal scroll problem

[mrdplusd]

Hi, I have the already known problem that the page can be scrolled horizontally to the right beyond the edge of the page if I set the div position to sticky.

This only occurs in Safari, both on the Mac and on the iPhone.

The problem lies in the CSS overflow-x: visible.

I tested it extensively. Sticky off, everything is fine. Sticky on, the horizontal scrolling problem comes back.

Both WordPress and the Pro theme are up to date.

Is it a bug? After all, it is now a native Pro function.

Thanks

[ruenel]

Hey @mrdplusd,

Please set the maximum width of your Container to 100% to at least set a maximum width in your Bar element to a fixed value if possible.

Kindly let us know how it goes.

[mrdplusd]

Hello Ruenel,

Thank you very much first of all.

I checked the headers. It is already configured as you suggested.

Just to make sure you understand me correctly: It’s about making different DIVs sticky on some subpages and layouts. Why then should the header be adapted?

[ruenel]

Hey @mrdplusd,

Can you please set it to Sticky so that we can check the page in question? I thought you were experiencing the same issue with the known header settings present before.

Best Regards.

[mrdplusd]

Hello Ruenel! Okay, I set the div back to sticky. You can now look at the matter.

[ruenel]

Hey @mrdplusd,

I am not able to replicate the issue on my Mac using Safari.

Can you take a screenshot of your Safari while viewing your site?

Thanks.

[mrdplusd]

The problem occurs particularly with smaller screen sizes. If you drag the browser window smaller than 1200px, it will appear directly. You can then scroll the entire page to the left without any problems.

[ruenel]

Hello @mrdplusd,

Please set the overflow-x of the Column containing your Slider to hidden instead.

This is what is causing the issue. You may need to clear the cache and use private browsing mode before testing the site again.

Thanks.

[mrdplusd]

Okay, thank you for helping and finding a solution for this.

Is this a bug or a completely logical matter?

In principle, this means that a sticky div and a slider together on one page are initially incompatible with each other until Overflow x is deactivated in the slider.

This can lead to necessary subsequent adjustments or workarounds in the slider and the rest of the page, as the box shadow or (sometimes) the slider navigation become cut off or invisible.

In my case it required some global design adjustments because I had to compensate for the unwanted clipping of the box shadow by increasing the slider padding.

[mrdplusd]

Nonetheless, on some sites the problem persists, albeit to a minor extent. You can still scroll slightly on the x-axis.

What could that be about?

[ruenel]

Hello @mrdplusd,

The overflow of the body element extends when one of the inside elements is extending its width. This is why as soon as you set the overflow of any Column element to hidden the horizontal scrollbar disappears.

Thanks.