Pop-up Modal not scrolling on Mobile

Hey Gents,

I have an issue with my pop-up modal on my pricing page (specifically on mobile) where the user can’t scroll down to press the “Sign-Up” button because the modal takes up the whole screen. It might be a simple fix but I figured I’d ask for some help…

There are a few other topics like this but I didn’t read over a solution that fixed it :confused:

Here’s my Share Link: https://preview.webflow.com/preview/relaxed-agent?preview=1a319fb357dad54dd7c636a4775977aa

And a screen shot of the piece on the designer:

Lets start from “why” - the parent of the modal is in fixed position. The scroll working but you always see this Modal in the same fixed position (you can not scroll fixed!) - test this with chrome emulator and see this happening.

One way is to add this code to "sign-up-wrapper" (set some height + overflow):

max-height: calc(100vh - 80px);
overflow-y: auto;  

Read about overflow-y her.

see this articles:

https://stackoverflow.com/questions/25874001/how-to-put-scrollbar-only-for-modal-body-in-bootstrap-modal-dialog

https://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen

2 Likes

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.