Mobile Only Boxes Issue

Hello,

Please use below code:

#boxzilla-228,
#boxzilla-overlay { 
  display: none; 
}

@media (max-width: 720px) {
	#boxzilla-228 { display: inline-block !important; }
	#boxzilla-overlay { display: block !important; }
}

Make sure to change “228” with the correct ID of your box. Also please note that this code contains a rule that will affect other pop-ups as well.

I tried this solution and tinkered with it for some time but can’t move beyond it just kind of working.

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.

The hitch is that an opaque black overlay appears over the entire screen 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 I have within the box which I can see as a big nuisance to many.

Thanks for your help thus far Harish.

Hi,

Do you have a link to your website so we can test some code to see if there’s something else conflicting with the code we supply?

In any case, there are some improvements we can make to Harish or Lap’s suggestion. The following code should work a lot better.

@media (min-width: 720px) {
	#boxzilla-228 { display: none !important; }
        .boxzilla-228-overlay{ display: none !important; }
}

Now, if your box is positioned in any corner then this should work as expected. If it’s center positioned, things get a little harder but we’re about to push out an update that makes this a whole lot easier.

In any case, please do let me know your site link & box position and we’ll get this finally working for you!

• This reply was modified 8 years, 4 months ago by Danny van Kooten.

Hi Danny,

Thanks so much for your input. Your revision has gotten me the farthest by far of all the suggestions.

There’s still an issue with the box showing up reliably when on mobile. I am testing it on IOS in particular and have no idea what issues might be around on Android unfortunately.

After scrolling past the designated page %, the box doesn’t appear unless the screen zoom (pinch out/in) is messed with. It tends to stay after that, although it sometimes stalls scrolling and then disappears again.

I’m also concerned that pressing [X] to close the box throws the user to the bottom of the page; at least on IOS. This would completely lose your place and could certainly result in a bounce if I were to experience it.

I’ve positioned the box in the bottom right-hand corner.

My website is: https://debedbugged.com

Once again, thank you for your help!

On what version of Boxzilla are you? The scroll-to-bottom when closing issue have been resolved in v3.1.6, but if you are on that version and the issue is still there, do let me know.

On what pages of your site can I find a Boxzilla box? I’d love to run some tests, but was unable to find a Boxzilla box on your site.

I am running 3.1.6 according to the plugin page.

You can find it on any of the main pages or posts; it works reliably on desktop but might not come through on mobile.