What could be causing the scrolling issue on my Webflow search result page on mobile and how can I fix it?

Mobile scrolling issues on a Webflow search results page are often caused by overflow settings, fixed/sticky elements, or unintended layout shifts. Here's how to identify and fix the problem.

​

1. Check for Overflow Hidden on Parent Elements

• Use Webflow Designer’s Navigator panel to inspect all elements that wrap your search results.
• Look for elements (especially wrappers, sections, or body) with overflow: hidden applied. This can block scrolling on mobile.
• Select those elements and set overflow to visible or auto.

​

2. Inspect Fixed or Sticky Elements

• Fixed position elements (e.g., navbars, modals) can sometimes prevent scrolling if they cover the viewport improperly.
• Go to each fixed or sticky element and verify:
• They aren’t taking up the full height unnecessarily.
• Their z-index isn’t too high, causing layering issues.
• They don’t have a height of 100vh that prevents body scroll.

​

3. Check for 100vh Issues on Mobile Safari

• Mobile Safari handles 100vh incorrectly, often including or excluding the URL bar height.
• Replace 100vh with 100% height or use CSS custom properties (--vh) if using custom code to handle dynamic viewport changes.

​

4. Test for Overflowing Content

• Inside the search results container, check if any content (images, links, text) exceeds the viewport width or height.
• Use the Webflow preview mode or browser DevTools to inspect for horizontal scrolling or cutoff elements.
• Apply overflow-wrap: break-word or limit widths using max-width: 100% on offending elements.

​

5. Look for Disabled Scroll on Body

• If you're using custom code to enhance your search modal (e.g., disabling background scroll when search is active), ensure it reenables scroll when the page returns to normal.
• Double-check any JavaScript that sets document.body.style.overflow = "hidden" and ensure it's being reset properly.

​

6. Try Safe Area Insets on iOS

• If your page is unscrollable only on iPhones with notches, try padding with env(safe-area-inset-bottom).
• Add bottom padding to containers: padding-bottom: env(safe-area-inset-bottom); via Embed or Custom Code.

​

Summary

To fix scrolling issues on your Webflow mobile search results page, inspect for overflow: hidden settings, problematic fixed/sticky elements, 100vh sizing bugs, and ensure scroll is not disabled via code. Adjust or remove those styles to restore proper scrolling behavior.