Modify the padding around overlayed image captions in a gallery slideshow, squarespace 7.0

Hi,

I am trying to reduce the amount of padding around my image descriptions that are shown as an overlay within a gallery block, set to display as a slideshow. Mostly the part that I've circled in red in the screenshot, but it would be great if I could reduce the padding overall.

I've also written custom CSS based on other posts in this forum that has got my background opacity set to 0.8 correctly, but the code that sets the opacity of the meta-description is not working.

//Gallery block caption styling
.sqs-gallery-block-slideshow .meta .meta-inside {
 background: #000000;
 opacity: 0.8;
}
.sqs-gallery-block-slideshow .meta .meta-description p {
 color: white;
  opacity: 1;
}

We are running 7.0 on the brine template, you can see the page in question here https://www.biocommons.org.au/home-copy

@tuanphan you seem to have solved lots of these types of issues, any chance you know how to fix this one?

Thanks!

@Beyondspace that's perfect, thanks! How did you figure out what the correct code was to use to target that box in particular? As in how did you know I needed to use this part 

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside

On 5/8/2024 at 5:06 AM, PatrickCapon said:

@Beyondspace that's perfect, thanks! How did you figure out what the correct code was to use to target that box in particular? As in how did you know I needed to use this part 

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside

 

You can check them on the dev tool of browser