Lightbox is not displaying image when selected on mobile breakpoints

Hey everyone, new to the forums but made an account because I genuinely have no idea what’s going on with the lightboxes in my website. Whenever I click on the lightbox, whether it’s in the preview or in the published site, the image disappears on the mobile breakpoints (the last two). The only thing that shows up is the black background, and in linked lightboxes the image previews still show up at the bottom. I have tried the fix mentioned in another post where you create a div, make it a figure and reset all custom styles in the “All figures” HTML tag, but nothing changed. I’ve also tried the fix of changing the vw on the image which didn’t work either. This issue is also persistent across my entire site, not just one of the pages. Ontop of that the issue doesn’t fix itself when creating any new lightboxes; all lightboxes created on this site behave the same way. Really pulling out my hair over this, would appreciate any advice to guide me in the right direction. Some pictures of the issue:

This is a read-only link of my site:
https://preview.webflow.com/preview/sarahs-home-of-design?utm_medium=preview_link&utm_source=designer&utm_content=sarahs-home-of-design&preview=f07bde25981e62249024b1991360f99d&pageId=61b3924819395eddcedf7581&workflow=preview

You can duplicate the issue by going to the “Work” page, view any of the case studies then click on the first image you see at the top.

Hi Sarah,

You have 15px margin applied to “all images” (see below). If you change this to zero then you will see the lightbox working at the smallest two breakpoints.

Cheers, Dave

Thank you so much Dave, that worked! God bless you buddy :grin:

1 Like