Site URL: https://drewlittle.squarespace.com/
https://drewlittle.squarespace.com
password: circlehelp
Hello! I'm quite perplexed by something that is happening on my client site.
I am using the Gallery section / Slideshow Reel feature to display a carousel of images. On mobile (in portrait orientation), I would like for each image to take up 100% of the viewport width so I added the code below.
@media only screen and (max-width: 640px) {
.gallery-reel-item img {
object-fit: contain;
max-width: 100vw;
top: 0;
bottom:0;
left: 0;
right: 0;
margin: auto;}}
With the CSS applied, images with a horizontal and square aspect ratio look great but the effect does not seem to apply correctly on images with a vertical aspect ratio.
I know this code only applies to the image and I also need to adjust the width of the parent div but I can't seem to figure out the right CSS to apply any parent div (.gallery-reel-item, gallery-reel-item-src, .gallery-reel-item-wrapper) to achieve the desired effect of one image per viewport. The images with a vertical aspect ratio are always bunched together (as shown in the image).
I appreciate any assistance the Circle community is able to provide.