Jump to content

How to change a particular gallery images title fonts and wrap text

Go to solution Solved by tuanphan,

Recommended Posts

Hi I need to change a specific gallery's images title fonts to be Chelsea Market, and then wrap the title to a new line if it doesn't all fit in one line.  I attached a screenshot from my current site with notes to clarify.  The webpage is: https://www.bruddersbooks.com/ and then just scroll down till you see what's in this screenshot.  Can anyone advise me how to do that?  I couldn't find it in any of the regular design settings.  Again, this would only be for this one particular gallery versus a sitewide design change.  Thank you!

 

website question (2).png

Edited by Kristin_Leigh
adding website
Link to comment
  • Replies 4
  • Views 302
  • Created
  • Last Reply

Top Posters In This Topic

Please add this code to Website > Website Tools > Custom CSS

 

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-family: Chelsea Market;
}

 

Let me know if it helps and you can mark this as solution. Thanks. 

Link to comment

Yes almost there thank you!  It changed to Chelsea Market successfully, but two questions:

1. How do I wrap the text to a new line so it doesn't disappear with a "..." on smaller screens.

2. Right now it looks like it's using the Chelsea Market H3 style.  But it's a bit small on a desktop screen.  I think I'd prefer the H2 or a bit bigger.  Is there something in that code line you gave me I could add?

 

Thank you so much!

-Kristin

Link to comment
  • Solution

#1. Use this CSS code

div.image-slide-title {
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: initial !important;
    font-family: 'Chelsea Market' !important;
}

#2. Use this code

@media screen and (min-width:768px) {
div.image-slide-title {
    font-size: 30px !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.