Hello all!
I know this issue has come up in the forums quite a few times but none of the solutions have helped me.
My problem is that when viewing on mobile, the site allows users to scroll horizontal, making it difficult to scroll straight down. In past threads the solution was to make sure all large sections were set to Overflow: Hidden. I tried this, I even went to the extent of wrapping everything in a div and making it overflow:hidden… and still no solution.
I had the same issues with one of my sites. It is happen because some of your elements hidden over the screen view by interactions. Like this, for example:
Only way I could fix it - change interaction or clone element only for mobile view and create another kind of interaction, just for keep it inside the screen view.
But I didn’t try to play with overflow settings. BTW, body’s overflow on mobile view is still “visible”. Try to make it “hidden” too. If it will not help - you still can try my “old method”.
Hi @Jon_Lehman ! Thanks for the question, this is a common issue that is easily rectified. The best thing to do, is to open your site using your own read-only link, so you can make changes without affecting your site, to try to troubleshoot overflow problems.
The overflow is usually caused by some element on your site (or more than one) that has a fixed width set. I always recommend to use percentage based widths for layouts, so that elements never exceed 100% width from edge to edge.
To narrow down the cause the horizontal scroll on mobile, a good idea is to first go to the first view that has the horizontal scroll, in this case the Tablet view.
I took a look at your site, and this is what I found:
A. Change the fixed width on tablet portrait view of the element class shown below, from 964px on tablet view (it is inheriting this from desktop view) and change that to 100% width:
After making those changes, make sure your changes are saved and republish the site and see how things look. If something still need to be adjusted, it is ok, you can continue to make style changes
@sabanna@cyberdave Thank you so much for your quick and awesome response! Ultimately, Sabanna’s suggestion of making the mobile body overflow: hidden worked… not sure how I missed that. I had changed those interactions to only move in from 50px, so they didn’t go off the screen.
@cyberdave I am sure that I will need to fix those issues you brought up, especially on tablet view. I havn’t gotten that far.
Thanks again for the quick response. You guys are awesome!
Cheers, Dave