Streaming live at 10am (PST)

Lightbox caption is cut off

I have a lightbox in use on this page: https://theloganschool.webflow.io/about-logan
If you click on the image of the school the lightbox displays. When I look at it in Firefox or Chrome, I experience the same problem. The caption is half overlaid on the image on the bottom and half overhanging the image (hanging off of the bottom). When I analyze the code I can see that figcaption can be adjusted to fix the issue… but I can’t see the css that’s causing the issue in the first place. I’m happy to create custom css to fix the issue, but wanted to see if the issue can be resolved by removing anything, first. Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/theloganschool?utm_medium=preview_link&utm_source=designer&utm_content=theloganschool&preview=47a85607eb288876e96a92d2ad8ccac4&pageId=5e0f7d446a42a47f554b4c05&mode=preview

Hi @Denise_Dambracka thanks for reaching out.

This seems like it could be a bug related behavior, and I have reached out to my team for more insights about this experience.

In the meantime, there a simple workaround that can be achieved with the following snippet:
<style> .w-lightbox-figure { padding-bottom: 0; } </style>

Let me know if you have any more questions or issues, and I would be more than happy to continue helping out here.


​My best,
​Riley

1 Like

Hi @Denise_Dambrackas!

I wanted to follow up and let you know that we found out what was going on. The caption is inheriting some custom styles from the template, and we can override/reset those styles in the element by using a rich text element.

I made a quick video to explain how it can be done.

Hopefully this helps if you come across this issue again with future projects.

Riley

1 Like

:scream: I’d never thought about that! Thanks!

1 Like

This is not working for me.

I had included the custom style “padding: 0” as you’d suggested. That was working. I’ve removed that custom style in order to edit the all figure captions, as you suggested.

In the process of editing the “all figure captions” styles, there is already 0 padding in the settings for that style. Yet when I look at my captions, they are hanging off of the image yet again.

Thanks for the video.

It is not working for me.

I had included the custom style “padding: 0” as you’d suggested. That was working. I’ve removed that custom style in order to edit the all figure captions, as you suggested.

In the process of editing the “all figure captions” styles, there is already 0 padding in the settings for that style. Is that because of the changes you made?

Now that i’ve removed the custom code, the captions are once again hanging off of the image.

I’m just going to add padding: 0 back in again, because that seemed to work. I was very interested in getting to the bottom of this, but it will have to wait! Thanks again.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.