Archived topic
Mobile view has extra space on the side
5 replies · Started by Martin on March 11, 2019
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
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!
Here is what I did:
- Duplicated the entire site at a staging location: https://connexicore.com/mobile-slide-test
- Changed the theme from GeneratePress to Twenty Nineteen.
- Retested on mobile.
- 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.
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.
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.
Glad to be of help
