Lightbox problem - Image overlay appears offscreen

I’m having trouble with my lightbox in that when the lightbox is triggered, the images contained it it appear at the top of the site (out of the viewport and therefore invisible). It has something to do with the overall structure of my site, because I’ve implemented a lightbox sucessfully on another site.

Can anyone help troubleshoot what’s causing the weird lightbox behavior on this page: (scroll to the bottom for the lightbox “photo gallery”).


Here is my site Read-Only:

Hi @jonnymay,

Have you solved your issue ?
I have some bugs on your read only links but not the same as yours.
My advice :

Rebuild quickly your lightbox with new classnames
It ll be definitely easier than trying to solve this, plus your lightbox is not complicated at all it’s a 2min work.
Also double check your Z index, you might have a layering issue here.

If it’s still not working, please ping me,
Have a nice day,

Thanks, @zbrah. I will follow your suggestion, though I have a sneaking suspicion my problem lies somehwere outside the lightbox component. Something about the container page is causing the issue, i suspect. And yeah, the z-index issue is a thing; I’m tweaking that as well.

1 Like

Great @jonnymay.
Yeah sometimes its just easier to rebuild :slight_smile:

Hello, I had the same issue and I was able to fix it by removing definition of display from Body element.
(Removed display: block).