How can I prevent horizontal scroll bars and white space from appearing on a webpage longer than the vertical height when using 100vw in Webflow?
TL;DR
- Replace
100vwwith100%for full-width containers to avoid extra width from scrollbars. - Set
overflow-x: hiddenon the body or a wrapper and check for transforms, animations, or spacing that push elements outside the viewport.
Horizontal scroll bars and white space often appear when styles using 100vw don't account for the browser's scrollbar width. This causes elements to extend beyond the visible viewport, triggering unwanted horizontal scrolling.
1. Avoid 100vw for Full-Width Layouts
- Use
100%instead of100vwfor containers, sections, or wrappers intended to span the full width. 100vwincludes the scrollbar width (typically 15–20px), which breaks layouts on desktops with visible scrollbars.100%respects the width of the parent and avoids overflow issues.
2. Check for Overflowing Elements
- Inspect your design in Webflow Designer using the Navigator panel to find elements that might overflow.
- Look for elements with fixed widths, large margins, or translations (e.g., move, scale, or large paddings) that push them outside the viewport.
- On each suspect element (especially custom interactions), check the Transform and Spacing (margin/padding) properties.
3. Set Overflow Hidden on Body or Wrapper
- Select the Body (or a top-level wrapper like
main,section, or a.wrapper) and set: - Overflow: Hidden on the X-axis (horizontal).
- This prevents horizontal scrolling when rogue elements push outside the view.
4. Watch Out for Interactions or Animations
- Animations using move (e.g., X-axis shift) may push elements outside of the visible area.
- When animating, use % or viewport-relative units, and ensure you’re not shifting elements beyond the boundaries.
5. Use "Page Wrapper" Div Strategically
- Wrap your content in a main container (e.g.,
.page-wrapper) and apply max-width: 100% and overflow-x: hidden to it. - This safely contains all content within view, catching any overflowing children.
Summary
To prevent horizontal scroll and white space caused by 100vw, avoid using it on primary layout containers, use 100% instead, and set horizontal overflow to hidden on the body or a parent wrapper. Inspect for elements with transforms, animations, or margins that might exceed the viewport.