Custom CMS lightbox images overflowing


Thank you for trying to help. I am having an issue with my portfolio website. I added this custom CMS lightbox to my Art Gallery page and followed the instructions given on the page to do so. However, I noticed that the gallery modals on my page seem to keep moving right. The first image and its description look fine, but by the last image the description seems to start at the middle of the page and the image is cut off.

What is causing this issue? Are my images too big? If so, is there a way for me to set a max width on the images? I tried to do so in the style settings of the image-background div (which gets its background image from my Art collection), but it still did not work.

Here is my site Read-Only: LINK

Hey Kristina,

You can see the same problem in the original cloneable, if you make your browser narrower against the images. So, looks like a design flaw. If the images don’t fit easily, it cannot navigate to the next slide well.

You might have better results with swiperjs, I quite like it.

1 Like

Thank you so much! I will take a look at swiperjs. In the meantime, do you know of a short-term solution to fit the images well? Do you think I have to manually adjust the sizes of all the images? I am hoping for a quick ok-ish solution first before I try to dive into something new and break everything by accident…

Honestly your best bet for now is probably to switch to Webflow’s lightbox. You’ll lose your adjacent text, but you won’t have problems with your images breaking the navigation.

It looks like the author built it using javascript so without completely reverse engineering it, I wouldn’t know how to avoid the offset-bug. If you can find you image you could just try applying a max-width of 50% and see what happens.

1 Like