Webflow sync, pageviews & more.
NEW
Answers

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?

To fix the issue with your pop-up modal on Webflow's pricing page where it takes up the entire screen on mobile and prevents users from scrolling down to press the "Sign-Up" button, you can follow these steps:

1. Open your Webflow project and navigate to the page containing the pricing modal.

2. Select the modal element on the canvas or in the Elements panel. Make sure you have the mobile breakpoint selected in the top left of the Designer.

3. In the Style panel, click on the "Settings" tab (gear icon).

4. Look for the "Position" section and change the position from "Fixed" to "Absolute". This will allow the modal to scroll with the content of the page.

5. Next, scroll down to the "Overflow" section and change the overflow property to "scroll". This will enable scrolling within the modal if its content exceeds the visible area.

6. If you want the modal to be scrollable only vertically, you can add a custom CSS class to the modal element. Go to the Classes panel and click on "New Class". Give it a name like "modal-scrollable" and go back to the Style panel.

7. Within the Style panel, select the "Modal" class from the Selector field and scroll down to the "Overflow" section. Change the overflow property to "auto" instead of "scroll".

8. Save your changes and publish your site for the modifications to take effect.

By making these adjustments, the pop-up modal on your Webflow pricing page should resize to fit the screen and allow users to scroll down to access the "Sign-Up" button without any issues.

Rate this answer

Other Webflow Questions