Pop up design - Dawn theme

[socconnor]

Hi there, 

Does anyone know how to extend the black background on the pop-up below the email section? Its fine on mobile display but needs fixing on the desktop display. I have highlighted it in yellow.

Website: gokink.com.au

Thanks, 

Steve

[GTLOfficial]

Hello @socconnor

Go to online store ----> themes ----> actions ----> edit code ----> assets ---->custom-subscriber-popup.css
add this code at the end of the file.

.customNewsletter__container {
height: 55vh !important
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Moeed]

Hey @socconnor 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.customNewsletter__text {
    padding-bottom: 60px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-B2B · Accepted solution]

@socconnor,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#customNewsletter .customNewsletter__container {
   height: 58vh!important;
}
</style>

Result

[socconnor]

That worked. Thanks so much 🙂

[Dan-From-Ryviu]

Hi @socconnor 

You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.customNewsletter__container {
height: auto !important;
min-height: 50vh;
}

[ZestardTech]

Hello @socconnor 

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:

#customNewsletter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customNewsletter__container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}