Dawn theme troubleshooting - urgent

Store Design
, , , , , , , , , , , , ,

Topic summary

A user needs to hide a Nitro scratch card popup on mobile devices for their Dawn theme Shopify store.

Initial Solution Provided:

  • Add CSS code to base.css using a media query targeting screens under 768px width
  • Code targets #nitroPopUpIframeContainer with display: none !important

Problem Encountered:
The suggested CSS code didn’t work when implemented multiple times.

Root Cause Identified:
The existing base.css file has unclosed CSS syntax (missing closing curly brace), preventing new code from functioning properly.

Alternative Solutions Offered:

  1. Add the CSS code to Customize → Theme Settings → Custom CSS (avoids theme file editing)
  2. Use a Custom Liquid section in the Footer with <style> tags
  3. Add a closing curly brace } before the media query code in base.css to fix the syntax error

Status: The discussion remains open with multiple implementation options provided but no confirmed resolution yet.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

In my dawn theme website, I want to hide the nitro scratch card popup in mobile view. please help me to hide that.

website: https://offnorth.com/

Screenshot 2025-05-24 104415.png
Screenshot 2025-05-24 104415.png441×423 264 KB

please help me to remove this

2

Hello @Sivadarshan
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
#nitroPopUpIframeContainer {
  display: none !important;
}
}

result

18.png
18.png403×537 242 KB

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

3

@GTLOfficial I have tried multiple times this code, but nothing happens

4

The CSS code in your base.css is not closed properly.

Browser can live with that, but when you add more code, it does not work 100% as expected.

This is why I try to avoid editing theme code in my recommendations.

What you can do:

  1. Try adding this code to the Customize=> Theme Settings=> Custom CSS. Or,

  2. Add a “Custom liquid” section to the “Footer” section group and add code wrapped with … tags. Or,

  3. add a closing curly brace before the code recommended by @GTLOfficial if adding to the bottom of the base.css, like this:

}

@media screen and (max-width: 768px) {
  #nitroPopUpIframeContainer {
    display: none !important;
  }
}