I have a site where the photo gallery lightboxes have suddenly stopped working correctly, for example on this tour page below, click photo gallery. The lightbox image is squished and to the right, with the image description cut off.
https://www.buzztours.com/explore-tours/show-me-the-city
Here is the read-only:
https://preview.webflow.com/preview/buzz-tours?utm_medium=preview_link&utm_source=dashboard&utm_content=buzz-tours&preview=0840475b4ca32ed37b3f206df068a9c9&workflow=preview
I did a little experiment and it seems to have something to do with using a lightbox inside a grid.
At first I thought maybe grid manual vs auto was the issue, but this lightbox experiment won’t work at all inside a grid. One is a lightbox in a simple container, and one is a lightbox where the container is a grid.
Published:
https://lightbox-test-17195e.webflow.io/
Read-only:
https://preview.webflow.com/preview/lightbox-test-17195e?utm_medium=preview_link&utm_source=dashboard&utm_content=lightbox-test-17195e&preview=136d0cb0202319c4ce0d779e38b5d90e&workflow=preview
This is frustrating because the lightbox has been working fine on the client site for a couple of years, until I happened to check the site today.
Is anyone else experiencing this? Or is there something I need to do different? So far rebuilding the layout without grid seems like the only option.
I’m not sure how to resolve this in the designer but when inspecting the live site, I see that the absolute positioning of the image class=“w-lightbox-img w-lightbox-image” is causing this. When I remove, everything looks ok. Possible that some custom code on this page can override the absolute position?
Thank you so much Port-of_Folio for identifying that issue. The only custom code I had on the site was google analytics, and having just removed that did not change anything. Thank you for identifying what you did, maybe I can find a way to fiddle with it in the designer to make things work. I don’t expect Webflow support to deal with it, but I am disappointed that something that used to work, doesn’t any longer.
Regarding custom code, I was saying that you might be able to use custom code to override that absolute position. (Not really the best way to solve it tho)
At first I thought the image was aligning to your grid element. Still looks that way but I moved the light-box element outside of the grid altogether and the same issue occurred. I then tried dragging a brand new lightbox into the grid and got the same issue.
Have you tried removing the custom code from the page Head tag and test? Or maybe code in you site-wide settings panel?
Thank you again for your thoughts on this.
You’ll see I created a new test page called Show Me The City test, removing any and all custom code for the page and the site head too. No help. I also took the lightbox out of the grid, positioning the trigger above it, to no avail.
Most troubling is the second read only link I posted. Nothing in the site but two lightboxes. One in a grid, one not. One works, one won’t even launch.
Webflow support helped put an end to this problem. Thank you for Port_of_Folio you were right on the money re what was causing it, and to solve it, just had to level up to the All Images tag in the Designer, which was set to absolute. Don’t know how that happened; must of been a moment of frustrated process of elimination sleuthing that led me to make that setting and then forget to undo it.
