Archived topic
Page too wide on mobile - extra space added for scrollbar
5 replies · Started by John C on September 27, 2021
My website is showing extra space to the right on iOS (I don't have an Android device so can't test fully) where the scrollbar is supposed to sit I presume. It doesn't show initially but you can scroll right manually and it will then show it's too wide. Any help would be greatly appreciated. Site below.
Hi there,
Can you make sure to use the full-width content container first?
https://docs.generatepress.com/article/content-container/
It's needed when there are full width elements on a page like yours.
If that doesn't fix the issue then try this CSS:
body {
overflow-x: hidden;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
I actually don't see that option in the Customizer and the overflow-x doesn't work. What happened to Ying's response regarding the Slider at the top being the issue? I think she may have been on to something.
Here's a screenshot of what it's doing.

Hu there,
i checked the site with overflow-x hidden enabled and it worked correctly.
Try updating CSS to this:
html, body {
overflow-x: hidden;
}
And clear your browser caches to make sure the CSS is loading.
Okay great thank you, I think adding the html part was the trick
Glad to hear that!