Gallery Title caption not wrapping

Site URL: https://kindea-labs.squarespace.com/

Hi!

We're utilizing a gallery block to showcase video links to Vimeo. We're having a hard time formatting the titles in the caption. The text is not wrapping but cutting off the word with 3 dots at the end. Ideally, the words would wrap and the whole thing would be centered.

.image-slide-title {

  word-wrap: break-word;
  padding-bottom: 10px;
  font-weight: bold;
  
}

Also, how can I make the font responsive? I've tried adding the line below which mostly works but on mobile the font is super small.

.image-slide-title {
  
  font-size:1.2vw !important;
  word-wrap: break-word;
  padding-bottom: 10px;
  font-weight: bold;
  
}

Thank you!

I see fine here. Do you still need help on this?

Hi Tuanphan, please see in mobile aspect ratio, and my second question.

Thank you!

On 9/9/2020 at 11:14 AM, tuanphan said:

I see fine here. Do you still need help on this?

Still available to help on this?

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.image-slide-title {
    text-overflow: unset !important;
    overflow: visible !important;
    white-space: initial !important;
	font-size: 12px !important;
}
}

@Tiger_Thomas and @tuanphan What was the final CSS you used for wrapping the text? Trying to get Gallery Image Titles and Descriptions to wrap on https://www.sbamatch.com/home-copy

Thank you!

15 hours ago, LUDLOW said:

@Tiger_Thomas and @tuanphan What was the final CSS you used for wrapping the text? Trying to get Gallery Image Titles and Descriptions to wrap on https://www.sbamatch.com/home-copy

Thank you!

Add this CSS

.image-slide-title {
    white-space: initial !important;
}

Bingo! Thank you very much. 

@tuanphan i'm trying to wrap the caption under an image in a gallery strip SECTION. is there CSS for that?

On 2/13/2024 at 3:59 AM, spcoon said:

@tuanphan i'm trying to wrap the caption under an image in a gallery strip SECTION. is there CSS for that?

Can you share link to page where you use Gallery Strips?

I tried some of the code on this thread, but it didn't work. I'm trying to wrap the caption on an image gallery in a blog post. You can see on this page that the captions under the photos are cut off.

I also don't see a way to reduce this font size, which might solve my problem, so that's another option if wrapping isn't possible.

https://www.smallbusinessrising.net/updates/2024-town-hall

On 2/16/2024 at 10:53 PM, JCDandP said:

I tried some of the code on this thread, but it didn't work. I'm trying to wrap the caption on an image gallery in a blog post. You can see on this page that the captions under the photos are cut off.

I also don't see a way to reduce this font size, which might solve my problem, so that's another option if wrapping isn't possible.

https://www.smallbusinessrising.net/updates/2024-town-hall

Use this code to Custom CSS box

div.image-slide-title {
    overflow: visible !important;
    white-space: initial !important;
}