[Support request] Sliding pages on mobile

[Damon]

Hi, I’m finding that pages “slip and slide” to the left and right, on mobile, as I pull a page down. Is there some CSS you can suggest to “lock” the page into only scrolling vertically?

https://www.dropbox.com/s/sz23865y2nd0ihq/Photo%20Mar%2006%2C%2011%2021%2020%20PM.png?dl=0

https://www.dropbox.com/s/c05tnoouru2g0az/Photo%20Mar%2006%2C%2011%2021%2012%20PM.png?dl=0

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

always best to try and find the element which is breaking outside containment. What i can see is the mobile navigation has additional padding which is creating small amount of movement. So try this:

#mobile-header {
    box-sizing: border-box;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Damon]

I edited the page, and included login and password. Your CSS worked marvelously on the earlier page. However it isn’t working on other pages. I removed all CSS to test. The template is from GeneratePress.

Note the same slipping and sliding appears to be on mobile safari with many of the GP provided templates:
https://generatepress.com/site-library/

If there’s a root issue with GP, or the GP provided templates, would rather address that. Otherwise, perhaps another CSS suggestion?

Thank you!

[David]

So this is the CSS that most people ( and some themes ) throw at their site to stop this from happening:

html, body {
    overflow-x: hidden;
}

The issue is not GP related but rather content related. And custom CSS that is applied to that, hence we see a lot of pagebuilder sites experiencing this problem.

I haven’t personally noticed any of the Sites experiencing this on a live device but i will now take a look 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts