Disable lightbox on mobile

Hi everyone,

Is there a way to disable lightbox on mobile but continue to have it active on desktop and tablet?

Thanks!

Hey Zeb!

There’s no native way to disable it, but you could consider creating a duplicate image element that mimics the look of the lightbox styling you have, and setting the lightbox to view:none on mobile and having the mimic set to view:none on everything aside from mobile.

Thanks Sam, great suggestion and sort of where my head was at with this!

Are you able to explain how I would go about setting the lightbox view to none for mobile?

Thanks!

For sure!

I recorded a quick walkthrough video for you here since it’ll be faster to explain, but super easy to do and you should have no problem.

https://www.loom.com/share/880e04173b39467c827c57dcbdb28764

Thanks so much for recording that Sam, much appreciated!

I think the issue here for me is that with this method I would have to update the same image in two places which could get very time consuming.

My ideal situation would be to have the one consistent lightbox component so the images only had to be updated in one place but just have the lightbox functionality disabled on mobile. I’ve been dabbling with the idea of targeting the lightbox display on mobile and trying to make it display none but I haven’t completely solved it yet!

Thank you so much for your help :slight_smile:

You could always make the image inside the lightbox element a symbol. :slight_smile:

Good suggestion, I’ll give it a go! :slight_smile:

This worked for me.

@media screen and (max-width: 767px) {
.w-lightbox {
pointer-events: none;
}
}

1 Like

Thanks for doing the short video!
Concise, clear and works like a charm!

1 Like