Pop up design - Dawn theme

Store Design
, ,
1

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

socconnor_0-1728628524481.png
socconnor_0-1728628524481.png1405×855 174 KB

Thanks,

Steve

2

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

9.png
9.png664×551 135 KB

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

3

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 tag

RESULT:

Moeed_0-1728629083997.png
Moeed_0-1728629083997.png641×569 143 KB

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

Best Regards,
Moeed

4

@socconnor ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Result

BSSCommerceB2B_0-1728629245104.png
BSSCommerceB2B_0-1728629245104.png1069×690 244 KB

5

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;
}
6

That worked. Thanks so much :slightly_smiling_face:

7

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%;
}