Have box show up ONLY for mobile?

Hi,

This is not an official feature yet, but we are actually working on this as a future possibility.

For now, the way to do this would be with your own custom CSS.

For example (for screens between 0px and 820 px)

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

Or if you only want this for a specific box ID you could try (using 28 as sample ID, use your own box id there):

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

You could add this CSS to your (child)theme css or trough a plugin like “simple custom css”

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.

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.