Media queries to hide dialog pop-up

[Anonymous]

Hi there,

I'm running into an issue with one of our email newsletter sign-up pop-ups, which is a Dialog component in a web campaign. Currently, the sign up box performs just fine on desktop devices, however it doesn't resize properly on mobile devices. We'd like to just remove the component from appearing on all mobile-sized resolutions.

Screenshots of the dialog on desktop and on mobile.

I have tried using the following code in the <style></style> section at the top of the dialog's HTML to create a media query and then hide the display of elements at a certain resolution, however to no avail:

@media (max-width: 500px) {

display: none;

}

Is there a way this could be accomplished? Happy to provide any further clarification if needed!

Thanks everyone!

[Anonymous · Accepted solution]

After some more troubleshooting, I was able to solve the issue.

For anyone who may stumble upon this in the future, the issue was that the <div> that enclosed the images and body copy of the signup was set to be locked at 500px. Media queries didn't appear to be working since this 500px width was set as an inline css style on the div itself. I removed that width property and created a new class (simply called .newsletter-signup-1) and adjusted the width at the desktop breakpoint to be 500px, and at the mobile breakpoint to be 275px.

After those adjustments, I was able to achieve a more properly sized box on mobile, image here.

Hope that helps!