Jump to content

How to change the font size for gallery image titles? (gallery grid - Hayden template)

Recommended Posts

Hello! I need some help. I'm using the Hayden template and an image grid with "Show Title" enabled so that the title is displayed below the image. But there is no option to style the font for the gallery image title. I adjusted the "page text font" size to be larger, but this didn't affect the text below gallery grid images, so the text for the gallery images is now smaller than the rest of the site and difficult to read. ☹️

I'd like to:

  1. Make the title font size bigger.
  2. Bold the title font.
  3. Make it so that a long title wraps to another line instead of getting truncated with 3 periods (...) This is especially important when viewing on a mobile device where there is less space for the title.
  4. Display the image description below the title, also with wrapping instead of truncating (and style that font as well)

Could someone please help me out? I'd be happy if I could accomplish #1 and #2 at the bare minimum, but I would love to be able to show the full title (via wrapping) and display the image description.

My site URL is https://www.mattforeman.dev

Thanks!

Link to comment

Try this as a start. Add to Custom CSS:

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-size: 18px;
    white-space: normal;
    text-overflow: initial;
    font-weight: 600;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
6 hours ago, Ziggy said:

Try this as a start. Add to Custom CSS:

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-size: 18px;
    white-space: normal;
    text-overflow: initial;
    font-weight: 600;
}

That worked! Thank you so much, @Ziggy! 🙂 That solves #1 - #3. Any idea how to add the image description below the title also? (And format it with a slightly smaller font?) I may choose not to do that if it looks too crowded, however having a little bit of smaller description text below the title may look nice.

 

Also I just realized that the "Clickthrough URL" is only active on the image itself and not if you click on the title text. Is it possible to add Custom CSS to allow the user to click on the text to open the link also?

Thanks!

Edited by Matt2468rv
Link to comment
  • 4 months later...

@Matt2468rv In case if you still need this, to add Description under Title, you can use some CSS code like this

a.image-slide-anchor.content-fill + .image-slide-title:after {
    display: block;
    font-size: 12px;
    color: black;
}
a.image-slide-anchor.content-fill[href="https://store.steampowered.com/app/1714400/Neo_Art_Space/"] + .image-slide-title:after {
    content: "Neo Art Space VR Description";
}
a.image-slide-anchor.content-fill[href="https://www.simulacra.io/"] + .image-slide-title:after {
    content: "Simulacra Description";
}
a.image-slide-anchor.content-fill[href="https://www.youtube.com/watch?v=1BPjjZPYtcI"] + .image-slide-title:after {
    content: "Quantum Mirror VR Description";
}

image.thumb.png.b68cc5e10fca8070b301d41c3d4a96a8.png

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.