How to setup media queries for popup (javascript)?

Question

JavaScript

Hello!

I have a WordPress site and I recently installed a popup plugin. However, I am not satisfied with the design of pop-ups on small devices. So I decided to create a separate popup for PC and another for mobile. devices and tablets.

The problem is that the plugin does not support displaying popups depending on the screen width. So I decided to do it myself.

I figured out the styles by adding individual popup ids to style.css with a media rule and setting them to display: none !important;

But the javascript still loads and I end up scrolling the page and everything freezes until I click/tap on the screen.

Can you please tell me how to set up media queries with the right rule for javascript so that the popup does not start? Where exactly should the code be added?

The CSS looks like this:

media (max-width: 991px) {
#popup id {
display: none !important;
}
}

media (min-width: 992px) {
#popup id {
display: none !important;
}
}

Thanks in advance for your help!