Changing font of Gallery Block caption

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

Can you share link to page in screenshot?

Hi @tuanphan !

Sure, the website is: https://www.spiritualland.com.sg/

it's currently under construction. Please DM me so I can give you the password, thanks!

The image is from the homepage.

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!

Can you share access password?

Hi @tuanphan

Have just DMed you the password. Thanks!

Add to Home > Design > Custom CSS

.slide:hover .meta * {
    color: red !important;
    font-family: monospace !important;
    font-size: 20px !important;
}

@tuanphan

Thank you so much for the quick reply!

Is it possible to change the size of the caption box, as well as the padding around the box? 

try

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

(padding: top right bottom left)

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?

.slide:hover .meta {
	padding: 0 !important;
}

@tuanphan

It isn't working 😞
There is somehow still space between the text box and the edge of the picture.
Was hoping to move the whole box more to the corner if possible.
Thank you!