Jump to content

Gallery Title caption not wrapping

Recommended Posts

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!

 

Link to comment
  • Replies 11
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.