How to vertically center pop-up on mobile 🤪

[mmm]

Hi,

with the new flexbox layout my css to center pop ups on mobile doesn’t work anymore. All pop ups are displayed at the top of the screen. Can anyone who managed to center their pop-ups for mobile / iOS please share their css? It’s driving me crazy right now

Cheers

[mmm]

Previously I used the css proposed in following two threads (doesn’t work anymore):

How do I vertically center a popup?

I have a popup that is centred horizontally. But how do I center it vertically?

Popup center in IOS🙏

Hey, you can do this in a couple of simple steps In the element panel, scroll down to the bottom and give it an ID. E.g. popup. Make sure you have element ID’s exposed under the settings. In the page element panel, add this code in the page HTML header <style> #popup{ top: 0!important; bottom: 0!important; margin-top: auto; margin-bottom: auto; </style> For the status bar, you can add this in the same place. < meta name=“apple-mobile-web-app-capable” content=“yes”> < meta name=“…

#center {
top:0!important;
bottom:0!important;
margin-top:auto!;
margin-bottom:auto!;
}

This solution stretches the pop up and covers 100% of the screen size.

[mmm]

This seems to do the trick.

#center {
position: fixed !important;
top: 48% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}

Note that I used top: 48% because I feel that this feels more centered on devices with nodge.

I couldn’t figure it out because I forgot to add !important; to the statements.

[mikeolas]

This just helped me … Thanks