Jump to content

Changing font of Gallery Block caption

Recommended Posts

Hi guys!

I am using the BRINE template, and need some help with the tweaks on the Gallery Block slideshow. I'd like to change the font sizes on the title and description that shows up on a hover on the captions. I tried injecting custom css into the page itself but it is not working. I used the code:

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-only-title { font-size: 10px !important; }

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-only-description{ font-size: 5px !important; }

I'd like the font change for the slideshow to only be applicable on the homepage. I want it to be much smaller than the "body" font used.
Wondering if anyone has a better solution.


Is it possible to restrict the size of the caption overlay as well?

Many thanks in advance!
Neptina

Community forum question 08062020.png

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

So, I managed to find a tweak that works! Inserted this into the homepage's individual CSS.
Found this code here:

<style>
 .sqs-gallery-block-slideshow .meta .meta-title {
font-size: 10px;

}

 .sqs-gallery-block-slideshow .meta .meta-description p {
font-size: 8px;

}
}</style>

 

That being said, still trying to figure out how to change the size of the caption box (that hovers to appear) on the slideshow!

 

Link to comment

The code works perfect! I am able to change the size of the caption box bigger.
However I can't change a side to be smaller. I tried using -20px to make the left side shorter but it doesn't seem to work.

.slide:hover .meta {
    padding: 10px 10px 10px -20px !important;
}

Is it possible to move the caption box to the left most bottom corner as well?

Community forum question 09062020.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.