When you scroll down on mobile, the page moves around to the left exposing white background/screen. Why is this happening? I do not seem to have anything overflowing. Any help or things to check would be greatly appreciated.
Thanks
Here is my site Read-Only: https://preview.webflow.com/preview/panevino?utm_medium=preview_link&utm_source=designer&utm_content=panevino&preview=538cfb713f73596408ff178f33b2559f&mode=preview
Yeah I used to get that a lot when I started using Grids. I couldn’t find exactly which element, but you most likely have an element on your mobile version that takes up more than the one column (so it auto-generates an extra column, and it reads as overflowing content).
Make sure all your elements inside the grid only take up one column (or two, but then make sure both columns’ width amount to 100% or less)
Thank you, I will check that!
@Mr_Finn I checked it and all elements are in column 1 and it is still doing it. SO frustrating. But thank you for your reply. At least I know to check for that on upcoming projects!
@jmiller could you share your published link? It’s easier to detect these issues when looking at the published version.
@jmiller Found the culprit! It’s the footer. I played around with it (overflow hidden, adjusted width to 100%) and now the page no longer scrolls left. Btw it was doing the same thing on the desktop version, not just the mobile!
I did’t really get what was wrong exactly, but there seems to be some padding on the left and right, and the black bar of of the footer was overflowing outside the viewport. Re-work your footer, make sure everything is as it should be. Let me know if you need more help. Cheers!
THANK YOU!! THANK YOU!! THANK YOU!!! That was it!
@sarahfrison Yes! Thank you. I was about to post the live link for you, but I tried his solution first.
Genius! This was my issue too. Good find, Mr Finn. Many thanks - it looks good on safari and chrome on iOS now.
