Hello,
I pulled the code below to remove the extra buffer between captions and image blocks -- and it worked. It has an undesired side effect that vertical images are now very narrow and small. Wondering how I can remove the padding but still keep images at full width on mobile?
All of my CSS below - relevant lines in red. Thank you.
Good page (all horizontal image): https://llama-cobalt-lm35.squarespace.com/covid
Bad page (vertical image): https://llama-cobalt-lm35.squarespace.com/artists
password: everke
/* Center captions within the gallery grid */
/* Apply to all screen sizes */
.gallery-lightbox-background {
opacity: 1;
background-color: white; /* Change the background color here */
}
/* Adjusting margin for the caption */
.gallery-caption .gallery-caption-content {
font-size: 18px !important;
}
/* Center captions using flexbox */
.gallery-caption-grid-simple,
.gallery-caption-grid-strips,
.gallery-caption-grid-masonry {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 100% !important;
text-align: center !important;
}
@media only screen and (max-width: 767px) {
.gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
margin-bottom: 70px !important;
height: 60vw !important;
}
.gallery-caption {
margin-top: 0 !important;
}
.gallery-caption .gallery-caption-content {
font-size: 12px !important;
}
}