Why doesn't my Webflow site scroll on mobile after publishing, even though I don't have overflow hidden and the page scrolls on preview?
TL;DR
- Check for full-screen fixed or absolute elements with high z-index that may block scroll.
- Inspect Body/HTML overflow settings on mobile and tablet breakpoints for hidden overflow.
- Identify oversized elements in mobile view like sliders or embeds that extend beyond the viewport.
- Ensure no custom viewport meta tags are overriding defaults.
- Use DevTools on mobile to locate scroll-blocking elements.
- Temporarily disable third-party scripts or custom code to isolate the issue.
If your Webflow site doesn't scroll on mobile after publishing, but works in Preview and has no overflow: hidden, the issue is likely due to a fixed or oversized element blocking the page scroll.
1. Check for Fixed or Absolute Positioned Elements
- Fixed or absolute elements can prevent scrolling if they cover the entire screen silently.
- Look for elements with
position: fixedorabsolutethat haveheight: 100vhortop: 0; bottom: 0;styles. - These might block user interaction, especially if
z-indexis high andpointer-eventsare enabled.
2. Verify Body and HTML Overflow
- Even if no elements have
overflow: hidden, check ifBodyorHTMLelements have this style manually set at a higher breakpoint and inherited downward. - Go to Body (All Pages) tag and review the Overflow property in mobile and tablet views.
3. Look for Oversized Elements
- Elements that exceed the viewport on mobile can break scroll behavior.
- Switch to mobile portrait view in the Designer and look for:
- Sections with min-height: 100vh or hardcoded pixel heights.
- Elements such as sliders, Lottie animations, or embeds that might be too wide.
4. Verify Viewport Meta Tag
- Webflow handles this automatically, but if you embedded a custom meta viewport tag (using an Embed block or Custom Code), it could interfere.
- Go to Project Settings > Custom Code, and check if there's a
<meta name="viewport"...>tag that overrides default behavior.
5. Inspect Published Page in DevTools
- Open the published site on a real mobile browser or Chrome’s Developer Tools in mobile mode.
- Use the Elements tab to see which element is covering the body or preventing scroll.
- Check for elements with high
z-indexthat span entire height/width.
6. Remove Third-Party Scripts Temporarily
- Custom JS or third-party plugins can block scroll unexpectedly.
- Temporarily comment out custom code from Project Settings > Custom Code > Footer and test again.
Summary
If a Webflow site doesn't scroll on mobile after publishing, it’s usually due to a full-screen fixed/absolute element, overflow settings on the Body or HTML, or oversized elements breaking layout. Inspect styles and element positions in mobile views, and review any custom code or fixed containers that may interfere with scroll behavior.