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
- Use 100% widths instead of 100vw to avoid scrollbar-related overflow.
- Apply overflow: hidden to the body or a wrapper div to prevent excess horizontal scroll.
- Inspect elements using Chrome DevTools to identify and fix overflow issues.
Unexpected horizontal scroll bars and white space often occur in Webflow when using 100vw, because 100vw does not account for the browser's scrollbar width. Here's how to prevent this issue effectively.
1. Avoid Using 100vw for Width-Based Layouts
- Use
100%instead of100vwfor full-width elements whenever possible.100%respects the actual visible width minus the scrollbar. - Use
100vwonly for specific cases, like fullscreen sections where scrollbars are not present (e.g., splash pages or modals).
2. Prevent Overflow from Child Elements
- Check for overflowing elements inside your layout that might have widths set to
100vw, fixed pixel sizes, or excessive negative margins. - Common culprits are:
- Sliders or images set to exceed viewport width.
- Sections or divs with
position: absoluteorfixedand left/right offsets. - Set
overflow: hiddenon thebodyandhtmlor on a wrappingdivto restrict unwanted overflow.
3. Apply "Hidden Overflow" Correctly
- In Webflow, go to the Body element and:
- Set
Overflow: hiddenOR - Preferably, wrap full-page sections in a top-level
div(likeWrapper) and setOverflow: hiddenon that instead. - This prevents horizontal scroll without affecting vertical scrolling.
4. Inspect with Chrome DevTools
- Use DevTools → Elements tab to:
- Hover over and identify elements wider than the viewport.
- See the exact properties causing overflow.
- Look for computed widths exceeding the window width, especially things set to
100vw.
5. Use CSS calc() for Precise Widths
- If you absolutely need near-viewport width minus scrollbars, use something like:
width: calc(100vw - 17px)(17px is an average scrollbar width; adjust if needed).
6. Consider Setting Max Width
- For broader compatibility, set a
max-width: 100%on full-width elements to avoid unintended overflow on smaller devices or when using100vw.
Summary
To prevent horizontal scrollbars and white space in Webflow, avoid using 100vw in layouts where vertical scrolling exists. Use 100% widths, apply overflow: hidden where appropriate, and inspect layout issues with DevTools to catch elements causing overflow.