Why is my Webflow site scrolling horizontally on mobile and how can I fix it?
TL;DR
- Use Webflow Designer’s mobile view and Navigator to identify elements exceeding viewport width.
- Fix layout issues by adjusting fixed-width elements, margins, and positioning; apply overflow-x: hidden to main sections if needed.
- Use the Audit Panel to catch layout warnings and test on real mobile devices to confirm the issue is resolved.
Your Webflow site is scrolling horizontally on mobile because an element on the page is exceeding the viewport width, causing unwanted overflow. Here’s how to find and fix it.
1. Identify the Overflowing Element
- Go to Webflow Designer and preview your site in mobile view.
- Scroll horizontally to see if any section sticks out beyond the viewport.
- Use the Navigator panel to isolate sections and elements. Slowly hide and re-enable elements to identify the one causing the overflow.
- You can also enable the X-ray Mode to better visualize bounding boxes.
2. Check for Problematic CSS Properties
- Look for elements with fixed widths (e.g.,
width: 100vw) instead of relative widths (e.g.,100%), especially in combination with padding or margins. - Inspect elements with large absolute positioning, wide margins, or negative margins that force them outside the viewport.
- Buttons, images, or long text in a flex or grid layout can also trigger horizontal overflow.
3. Set Overflow to Hidden
- Select the main sections (like Body, Wrapper, or Section).
- In the Style panel, set Overflow: Hidden for the X-axis (scroll direction) to cut off anything that goes outside.
- Apply this rule only to containers and not to interactive areas that must scroll.
4. Use the Webflow Audit Panel
- Open the Audit Panel (in Designer, bottom-right corner).
- Check for layout warnings such as "Element width exceeds viewport".
- Resolve any flagged issues manually.
5. Test on Real Devices and Browsers
- Webflow’s Designer simulates breakpoints, but actual devices may render differently.
- Use the Webflow Preview and then open the published site on Android and iOS browsers to verify it's fixed.
Summary
Your site scrolls horizontally due to one or more elements overflowing their container or viewport width. Identify and correct the element causing overflow, and consider setting overflow-x: hidden on key parent sections to contain it. Always test your live site across actual mobile devices to ensure the fix works as intended.