Mobile Only Boxes Issue

I’m restarting this thread because the original has been tagged as Resolved although the problem persists.

Here are the details and updates since the last post.
—-
I’m trying to configure my download so that a specific box shows up for mobile only.

I tried Lap’s solution seen here, but have had some issues I can’t figure out.

Using:

@media all and (min-width:0px) and (max-width: 820px) {
#boxzilla-# { display: none !important; }
}

I also made changes to Harish’s code in the @media line, changing the first line to @media all and (max-width:720px) {

Results in my mobile-specific box showing up on desktop, along with the desktop native version once you exit it and scroll a little.

No box is appearing on mobile at all.

I also tried Harish’s solution, seen here.

This solution kind of works.

It seems that the order in which you create boxes has something to do with overlays appearing. By migrating my mobile box to the earliest box I had created, I did get it to appear on mobile and not on desktop.

That has nothing to do with the CSS but would seem to be related to the plugin itself.

The hitch is that an opaque black overlay appears over the entire screen ONLY on mobile when the altered CSS is active. While the overlay is around you can’t interact with any elements beneath it.

The box also seems to arbitrarily appear while moving through pages, rather than at a certain % as intended.

On top of that, attempting to tap the exit button (x) forces me into entering information in the email signup embedded within the box, which I can see as a big nuisance to many who intended to exit it.

Some details:
I have set “Do not auto-show box on small screens?” to 720 for my desktop-only boxes.
I used the Simple Custom CSS plugin and changed the box ID to the appropriate number.
Wordpress and Boxzilla have been updated to their latest versions.

Thanks in advance for your assistance.