Set Overflow to hidden to prevent unwanted horizontal scrolling and extra whitespace in your project when elements exist outside the viewport.
Sometimes elements on a page can exist outside the viewport, and an unintended side effect can be horizontal or sideways scrolling that shows extra whitespace around your design. Not all horizontal scrolling is a bad thing, but if it’s something that doesn’t work with your design, we’ll walk you through how to stop it using Overflow: hidden, responsive design, and mindful interaction setup.
In this lesson you’ll learn:
Many things can cause unwanted horizontal scrolling in your design, but generally it's caused by 1 of 2 things:
Unwanted horizontal scrolling can be caused by a different scenario than the 2 mentioned above, but layout and animation-related overflow tend to show up the most.
Horizontal scrolling isn’t always a bad thing. However, when testing for unwanted horizontal scrolling, be on the lookout for anything that makes your layout look or feel like the boundary (usually the right side of your design) isn't functioning as you would like. In other words, look for extra space or elements hanging off the edge of your design’s boundary as you scroll. You can check for this in the Designer and the published site.
To detect in the Designer whether your project might exhibit unwanted horizontal scrolling:
Note: If you're using a trackpad or a mobile device, scroll left and right — but if you’re using a mouse wheel, you can generally hold down Shift to scroll left and right.
Read more about how to make your designs responsive.
To detect unwanted overflow in your published site (especially if you have interactions in place):
Extra whitespace commonly occurs with interactions because even after the interaction has completed, the browser still thinks the interaction needs the extra width that was used at the start of the animation.
You can stop horizontal scrolling in a few ways:
Set the parent element’s Overflow to hidden:
When you set Overflow to hidden, this means you’re hiding elements that spill outside the parent element’s boundary.
Note: Position: sticky will not work if any parent elements are set to Overflow: hidden.
It’s always best to design responsively when creating your layout. However, a design might be laid out with a pixel-perfect width on one particular display (typically the designer’s display). This can result in unintended overflowing content when the design is viewed using other viewport sizes.
To test that you’re designing responsively:
You can also test what your designs will look like on a much larger display:
Read more about how to make your designs responsive.
Let’s say you have a Heading with an interaction set on it. The Heading ends up in the correct spot after the interaction has completed, but its initial position is off the page. Because the Heading starts off the page, this initial position causes the page to get stuck in this layout, and introduces unwanted horizontal scrolling.
To stop the unwanted horizontal scrolling that’s introduced because of this interaction:
This results in the Div block doing what you told it to — it hides anything hanging over its boundary. However, this causes your animation to get clipped.
To make sure the animation still functions as you had intended, you can remove Overflow: hidden on the Div block and instead set Overflow: hidden on the next parent up in the element hierarchy — the Section:
Now the animation works as expected and your elements no longer overflow.
You can also try the following fixes:
Read more about minimum and maximum dimensions and background images.
You might wonder if you can set the topmost element’s Overflow to hidden — the Body element.
If you set Overflow to hidden on the Body, this can clip the rest of the content on the page and stop users from being able to successfully scroll through your page beyond what’s initially visible in the viewport.
If you need to set Overflow to hidden on an entire page, an alternative is to use a Div block as a wrapper:
Aren’t you just overflowing with joy now that you’ve figured out how to solve your horizontal scrolling woes? Don’t hide it!
Read more about Layout and Overflow settings.
Something went wrong while submitting the form. Please contact support@webflow.com