Mobile visibility issue for a Shopify newsletter popup: it appeared on desktop but not on mobile.
Fix proposed: add a CSS media query targeting screens up to 749px width to force the popup container to display and set max-width to 100% for both the container and content. The code snippet is central, and a screenshot shows where to place the CSS in stylesheet.css.
Outcome: The original poster reported success and asked how to add left/right spacing. Solution provided: add margin (e.g., margin: 0 10px) to the popup container; adjust the value as needed. The OP indicated they would accept the solution.
New issue raised: another participant said the popup now appears but does not close after entering an email; the close “X” also doesn’t work. No fix for this behavior was provided.
Status: Partially resolved (visibility and margins addressed). Closing behavior remains unresolved; discussion is open.
@3azzzeh - please add given css to the very end of your stylesheet.css file and check
@media screen and (max-width:749px){
.newsletter__popup-container {display: block !important; max-width: 100%;}
#newsletter__popup-content {max-width: 100%;}
}
should look like this
