In my website’s mobile view I want to hide a particular popup named nitro, that appears only in mobile view. I attah the reference image for your understanding and also attaching the website link.
website: https://offnorth.com/
Topic summary
A user wants to hide a “nitro” popup that appears only on mobile view of their Shopify store (offnorth.com).
Proposed Solutions:
Multiple respondents offered CSS-based fixes with slight variations:
- Option 1: Add CSS to
base.cssfile targeting screens under 749px width - Option 2: Insert CSS code in
theme.liquidfile before the</body>tag - Option 3: Use media query for screens under 989px width
All solutions use display: none !important; to hide the #nitroPopUpIframeContainer element.
Alternative Approach:
One respondent suggested checking if an app is generating the popup and disabling it directly from the app settings, rather than using CSS.
Status: Multiple solutions provided with screenshot confirmations showing the popup successfully hidden. Discussion appears resolved pending original poster’s implementation choice.
1 Like
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: 749px) {
#nitroPopUpIframeContainer {
display: none !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution
Hi @Sivadarshan
let try to add this Custom CSS code :
@media screen and (max-width: 989px) {
#nitroPopUpIframeContainer {
display: none !important;
}
}
result:
if you are using any app disable it. there is option in that app.
in case you not find any option use the css display none it hide it.