[Resolved] Mobile view has extra space on the side

[Martin]

When I view the site on a mobile device, it appears as if there is extra space to the side. You can even “slide” the site within the mobile.

When I do a mobile preview with Chrome Inspect, though, this doesn’t happen.

Here is a screencast from my Google Pixel 2 https://www.screencast.com/t/rM7W4ZREch

[Leo]

Hi there,

This issue usually happens when there are elements on your page that are wider than the container.

I’m guess it’s something from Thrive.

Can you create a test page without using Thrive and see if it gets the same issue?

Please link me to it as well.

Thanks!

[Martin]

Here is what I did:

1. Duplicated the entire site at a staging location: https://connexicore.com/mobile-slide-test
2. Changed the theme from GeneratePress to Twenty Nineteen.
3. Retested on mobile.
4. No side-to-side sliding anymore.

I’m happy to provide an admin login so you can check it out as well. Just let me know a secure way to get it to you.

[David]

Hi there

as Leo said this is due to elements extending outside of their containers, generally happens when padding is added to page builder widgets as opposed to their columns / section containers. Some themes use this CSS to stop it from happening:

html, body {
    overflow-x: hidden;
}

Generally i would look for the elements that are causing the issue and fix them, but that CSS should do the trick.

[Martin]

David, thank you so much. That CSS snippet did the trick! Over time, I’ll review the elements to see what might have been the actual cause.

[David]

Glad to be of help

[Author]

Posts