Pop up design - Dawn theme

Store Design
, ,

Topic summary

A user encountered a display issue with a popup’s black background in the Dawn theme—it appeared correctly on mobile but was cut off on desktop, not extending below the email section.

Solutions Provided:
Multiple developers offered CSS fixes targeting the .customNewsletter__container element:

  • Accepted solution: Adding height: auto !important; min-height: 50vh; to Custom CSS via Online Store > Themes > Customize
  • Alternative approaches included editing custom-subscriber-popup.css or base.css files with similar height adjustments
  • Some solutions suggested adding code to theme.liquid above the </head> or </body> tags

Resolution:
The issue was successfully resolved. The user confirmed one of the CSS solutions worked and marked it as solved.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
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

1 Like
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

1 Like
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:

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