Adjusting width of slideshow caption background color

Site URL: https://vanilla-bat-2gpn.squarespace.com/

Hi,

I desperately need to adjust the width of this gallery caption background so it matches the width displayed on mobile (now it takes op too much space on the web version) while staying centered on the slideshow. I'm pretty new to CSS and this is the code I'm currently working with (which is probably a mess) and somehow managed to get a result thats pretty close to what I wanted:

.gallery-caption {
 position: static;
}

.gallery-caption p{
text-align: center;
color: black;
font-size: 2rem !important;
font-family: Aesthet Nova !important;
}

.gallery-caption-content {
position: absolute;
background-color: white;
left: 22%;
top: 45%;
right: 22%;
bottom: 45%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 2%;
  transition: opacity ease 200ms !important;
  opacity: 1 !important;
  pointer-events: none;
  color: #fff;
}

Can you help? Fingers crossed, thanks!

/ Michella

Your site is private. Can you setup password & share url again?

Sure! 

Password is: pleasehelp

😉

I sent you an email now. I just desperately want the issue resolved because it is the only thing keeping me from publishing my website.

On 2/10/2021 at 8:06 PM, michellalaura said:

I sent you an email now. I just desperately want the issue resolved because it is the only thing keeping me from publishing my website.

Your site is expired. You can contact Squarespace Customer Care to extend it (free)