How to

Fix horizontal scroll

Learn why it happens and how you can solve it

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.

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.