Forum Academy Marketplace Showcase Pricing Features

How to vertically center pop-up on mobile 🤪

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 :frowning:

Cheers

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

#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.

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.

3 Likes

This just helped me … Thanks