Lightbox Form not scrolling on mobile (iOS in particular)

Site URL: http://www.devinehealings.com

Hello,

So I have a Lightbox form on my home page (4th section) that is completely fine on desktop, however the scrolling is totally messed up on mobile. It seems to look fine upon the initial opening of the form, but once a field is selected, my phone zooms in automatically (which I have found out is due to the font-size and I wouldn't mind that happening if it wouldn't break the form).

The display of the form in a zoomed in state seems to be fixed, as the lowest text field won't show even if selected. And when trying to scroll down it only scrolls the main page beneath the actual Lightbox form. 

I have tried changing the display, position and overflow-y properties but nothing has worked. I also checked and none of the custom CSS used says anything about how the position or display has to react, yet it seems to be fixed. 

I also removed all my Custom CSS to see if any of the code is causing the issue but it remains regardless.

Please does somebody know how to fix this? I would highly appreciate your help!

Password to the site is devinehealing 

Thank you 

Hi. Have you solved this yet?

No I removed it from my website but I would like to solve it, can you help me please?

I am experiencing the same problem (cceri.org/action-teams both the "Join a Community Working Group" and "Join a Feasibility Study Team" lightbox forms). Works fine on desktop, but doesn't display the whole form on Mobile as soon as you click on a field to begin typing. You can't see the bottom field at all (although you can still type into it blindly), and scrolling up and down only moves the main page behind the form. Experiencing this issue on my iPhone XR using Safari and Chrome, although website visitors alerted me to this issue so I do not believe it to be isolated. 

I am having the same issue - any solution??

Update: I've contacted Squarespace customer support about this issue and they've confirmed that it is indeed a glitch on their end with lightbox forms on iOS, and that they are working on a fix (although no timeline was provided). Customer support suggested not using lightbox forms in the meantime.  

Was this solved? I am having a similar issue - the lightbox form (it is over a page long), it does not scroll on a windows / chrome browser desktop. But it does work on my iPad.

Any ideas?

Thanks, Mike

Try adding this to Settings > Advanced > Code Injection > Header

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
<style>
@media screen and (max-width:640px) {
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
   padding-bottom: 250px !important;
  }
}
</style>

@tuanphan I found this post months later and wanted to let you know that your solution does fix this problem. Thank you! Can't believe this is still a problem.

@tuanphan I have been having this issue for months, and this fixed it! It's been a real heel and I've received complaints about this problem multiple times from my users. 

Thank you for making this so simple for someone who has no idea how to code or where to even begin!

Thank you for the code which works very well on an iPhone.

However, it needs a tweak to work on iPads. I found this worked:

• increase max-width to 2732px (for 12.9 inch iPads)
• and padding-bottom to 450px.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
<style>
@media screen and (max-width:2732px) {
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
   padding-bottom: 450px !important;
  }
}
</style>