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!
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.
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.
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.