I'm using code to make a caption and color overlay on my simple grid gallery images. It's working fine on desktop but on mobile the color overlay doesn't fully cover the image.
https://leo-defensive-concepts.squarespace.com
pass: leo2023
.gallery-grid .gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
// overlay color
height: 100%;
padding: 0;
opacity: 1;
pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
display: flex;
align-items: center !important; // center vertically
justify-content: center !important; // center horizontally
}
.gallery-grid .gallery-caption-content {
font-size: 1rem !important; // caption font size
font-weight: 600 !important;
color: white; //caption font color
padding: 1vw; // padding around the caption
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item img:hover
{transform:Scale(1.1);width:100%; height:100%
overflow:hidden!important; transition-duration:1s} .gallery-grid-item {overflow:hidden!important}