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

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!

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

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!

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