How can I fix the issue with my pop-up modal on Webflow's pricing page (specifically on mobile) where the modal takes up the entire screen and the user can't scroll down to press the "Sign-Up" button?
TL;DR
- Avoid using fixed heights like 100vh on mobile; use auto or min-height: 100% instead.
- Set overflow on the modal wrapper to auto or scroll to enable vertical scrolling.
- Ensure the body’s no-scroll class doesn’t block modal content from scrolling.
- Confirm modal layers are on top and clickable using the Navigator.
- Test on all mobile breakpoints and adjust padding to keep the "Sign-Up" button visible.
You're experiencing an issue where the modal on mobile devices takes up the entire screen and prevents users from scrolling to the "Sign-Up" button. This is typically caused by fixed heights or overflow restrictions.
1. Check Modal Container Height
- Select the modal container in the Webflow Designer.
- Go to the Style panel and review its height settings.
- Avoid using 100vh on mobile breakpoints, as this can miscalculate the visible space due to browser chrome and toolbars.
- Instead, try min-height: 100% or allow the height to be auto so it grows with content.
2. Enable Scrolling in Modal
- Select the modal wrapper or body wrapper that contains all modal content.
- Set the Overflow to Auto or Scroll on the Y-axis.
- This ensures that if content overflows on smaller screens, users can scroll to reach the "Sign-Up" button.
- Avoid setting
overflow: hiddenon parent elements unless necessary.
3. Disable Body Scroll Only When Modal Is Open
- Webflow often uses a "No-scroll" class on the
<body>when modals open. - Ensure this class:
- Is not blocking modal scrolling itself.
- Only prevents background scrolling, not scrolling inside the modal.
- If necessary, create a modal-specific scrollable area with a fixed height minus header/footer.
4. Double-Check Z-Index and Clickability
- Make sure no other layers are blocking the bottom of the modal.
- Use Webflow’s Navigator to confirm your layout hierarchy — the modal content should sit above everything else and be clickable.
5. Test on All Mobile Breakpoints
- On Webflow's Tablet, Mobile Landscape, and Mobile Portrait views, test your modal behavior.
- Adjust the padding or spacing inside the modal so the "Sign-Up" button doesn’t fall off-screen.
- You may want to add extra padding-bottom on smaller screens.
Summary
To fix your mobile modal issue, remove fixed heights like 100vh, enable vertical scrolling inside the modal wrapper, and ensure internal elements are not cut off on smaller viewports. These adjustments will make your "Sign-Up" button accessible on all devices.
