Trying to figure out why my caption text keeps cutting off

Design help Custom code
1

So I have been using the advice in this thread to customize the lightbox gallery image captions that comes with Webflow Designer:

I used that CSS and modified it further

<style>
.w-lightbox-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1em 1em;
    /* background color */
    background: white;
		font: bold 0.75em "Montserrat", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* text color */
    color: black;
    opacity: 95%
}
</style>

I put this code in an HTML Embed tag so that I could preview the changes without having to publish my site. It appeared to work at first but when I chose a higher breakpoint (1280px) the caption would cut off. This would carry over to the default breakpoint (992px) until I left preview mode and returned to it.

myportfolio-990px-caption2
myportfolio-990px-caption21902×907 98.2 KB

myportfolio-1280px-caption2
myportfolio-1280px-caption21906×904 103 KB

I’m thinking that I need to look at the media queries and tweak them but it’s hard to find them when I check the code in Webflow and due to my subscription I can not export the code to look at it closer.

What’s also strange is if I start with the bigger breakpoint (1280px) the caption does not cut off.

myportfolio-1280px-caption
myportfolio-1280px-caption1212×634 310 KB

But if I switch to the smaller breakpoint (992px) then the text cuts off

myportfolio-990px-caption
myportfolio-990px-caption1435×715 187 KB

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

Fixed this on my own by changing the text alignment in the custom CSS code from center to left. I have not figured out yet why the text cuts off in the caption if it is not left aligned.

1 Like