debedbugged

I’m still receiving the same error from lighthouse.

Attempts to use font-display: swap or block don’t work via header script.

Resolved. I had webp enabled on Cache Enabler which caused the error.

Thanks.

Just what I needed. Thanks! Left a review. Happy holidays.

bump

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.

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!

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 Lap,
I tried your second solution 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; }
}

Results in my mobile-specific box showing up on desktop, along with the desktop native version.

No box is appearing on mobile at all.

Some details:
I have set “Do not auto-show box on small screens?” to 820 for my desktop versions.
I used the Simple Custom CSS plugin and changed the box ID to the appropriate number.

Thanks for your help in advance.