Center my Email Pop up on the homepage screen

Shopify Apps
1

Hello!

I have recently updated my email capturing pop up on the website, but it will not centre on the screen on both desktop and mobile view. It is nesting closer to the top of the page rather than the middle of the page. Can anyone please assist?

email pop up.png
email pop up.png1600×924 297 KB

2

Hi @Sydonie_Baldiss ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.privy-popup-content-wrap {
top: 25%!important;
}
3

Hi @Sydonie_Baldiss ,

Thanks for reaching out to the community with your question. This is MooseDesk - An ideal Helpdesk Solution that aligns perfectly with your Start-up.

Regarding to your question, to center your email capturing pop-up on both desktop and mobile views, you will likely need to adjust the CSS of your website. Please follow these steps:

  1. Go to online store in Shopify Admin > Select Themes > Actions > Edit code
  2. Then you can find Asset > base.css. Please paste this at the bottom of the file:

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Additional styles for the pop-up /
z-index: 1000; / Ensure it’s above other content */
}

So this is my answer to your question. If this is helpful for you, please let me know by giving MooseDesk a ‘LIKE’. If your question is answered please mark this as 'SOLUTION’.

Once again, keep up the fantastic work, and I wish you the best of luck in the future! :heart_eyes:

4

Hi @Sydonie_Baldiss,

Thanks for reaching out to the community with your question. This is MooseDesk - An ideal Helpdesk Solution that aligns perfectly with your Start-up.

Regarding to your question, to center your email capturing pop-up on both desktop and mobile views, you will likely need to adjust the CSS of your website. Please follow these steps:

  1. Go to online store in Shopify Admin > Select Themes > Actions > Edit code
  2. Then you can find Asset > base.css. Please paste this at the bottom of the file:

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Additional styles for the pop-up /
z-index: 1000; / Ensure it’s above other content */
}

So this is my answer to your question. If this is helpful for you, please let me know by giving MooseDesk a ‘LIKE’. If your question is answered please mark this as 'SOLUTION’.

Once again, keep up the fantastic work, and I wish you the best of luck in the future! :heart_eyes: