Streaming live at 10am (PST)

Website Horizontally Scrolling on Mobile Only?


#1

Hi there,

I’m attempting to publish my website - it’s functioning fine on web and tablet, but the mobile versions have unwanted horizontal scrolling and extra space to the left. I tried to set the Body to Overflow Hidden but then the scrolling doesn’t work at all on any platform. Any idea why there’s unwanted horizontal scrolling and extra space on mobile? Just want the website to scroll vertically as normal on all platforms. :slight_smile:

Thank you in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/a-design-studio?preview=c2e0397b07e2d6ab0b54182984fc5dd3


#2

Hi @fullstackdesigner, thanks for the post. I was taking a look at the site and it seems that at the moment for me, the horizontal scroll and whitespace (more commonly referred to as Overflow), seems to start at the Mobile Landscape view:

The overflow seems to happen on the Container 5 class:

I might suggest to make use Flexbox for the layout, it helps to avoid the overflow. In most cases, the target should be to keep all elements within 100% of the body element and if an element cannot fit, then wrap that element so that the layout collapses on mobile.

Here is a good layout example: https://flexbox.webflow.com/#fluidgrid

Also, another way to identify the overflow is to open your own site using the read-only link, go to the first viewport where the horizontal scrollling appears, then select the last element in the navigator and scroll the canvas to the left until all of the overflow is shown.

Next, start deleting elements in Read-only mode starting from the last element in the navigator until the overflow is removed when the offending element is deleted. This way you can quickly find the overflow of any element and make a change to the styling and/or structure to keep the elements wihin the body either by reducing width, or by having elements “collapse” on top of each other.

I hope this helps.