Fix horizontal scroll
Why does it happen
Horizontal scroll happens when the width of the elements on the page is wider than the size of the screen. Unless you set overflow:hidden to one of the parent elements, this horizontal scroll will persist on the page, but doing that is not always the optimal solution. It can happen due to various layout settings or less frequently, due to hidden characters, long links or words.
How to identify the issue
Usually, you’ll be able to tell which element is responsible for it as it’ll be obvious or happen on an element you’re building at the time. But if the cause isn't obvious, one great option to pinpoint the issue is identification by substraction.
Start by deleting section after section until the horizontal scroll disappears
Once you identify the section, go deeper into it and remove elements until you find the culprit
Keep in mind that it might appear that multiple elements are causing the issue and overflowing, but it’s usually just one element that’s expanding the elements and giving other elements space to overflow.
You can also do this on a published website by using browser specific debugger if you prefer to do that or if you only see the problem on a published website.
Problems and solutions
Layout problems
Common problems that might cause horizontal scroll
Viewport width
Using 100vw to limit content width can be a reason for a small horizontal scroll.
Hidden characters
Adding or pasting hidden characters can prevent text from breaking properly.
Long links
Long links might not break properly, especially on smaller screens.
Long words
Usually happens when using german, swedish or other languages with longer words
Good to know
Avoid it by design
You can limit the occurance of horizontal scroll by learning how to build sites according with the best practices. One amazing way to achieve that is to use Client-first style system, or even well built libraries like Relume.
Test extensively
A lot of the problems with horizontal scroll will only show up on lower breakpoints so you have to test your website both in Webflow with it’s responsive breakpoints as well as on actual devices users will use.
Sticky elements
If you’re using position:sticky, it will not work properly if parent elements are set to overflow :hidden. That’s why you don’t want to set overflow:hidden to body or any high level div to avoid future incompatibility.