Modal Windows buttons hidden on mobile devices

Support
, ,
1

Fixes for modal buttons on some iPhones to allow full screen and not have buttons hidden:
(Copy into the styles / CSS section of your app)

@media screen and (max-width: 600px){
.sweet-modal-overlay,
.sweet-modal.is-mobile-fullscreen {
    height: 100%;
  }
}
2

It looks like this is the problem I have (testing on iPhone SE 2020).
Where would I put this code to make it work on my page? - Is there a usage example?

3

Copy the snippet above and paste into the sites CSS and you’re done.

4

Thank you. Still learning.
I hadn’t found where to edit the site CSS. I’ve found it now.
All good. Tested, and working as expected.

5

I was getting pretty frustrated with modals not working on iPhone, and then found this forum post. I put this into my site’s CSS, and now modals work on the iPhone. That’s great - thank you!

But, a suggestion: I started building my site long after this fix was known, and used a fairly new PWA template, which didn’t have this fix. The entire point of the PWA was to work well on an iPhone, and an important feature of FMBF was broken. Maybe since then you have updated the template, but if not, I’d recommend adding this fix.