Mobile Gallery Slideshow Reel : Uniform Width

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.

Hi,

Which page are you referring to?

Hello @tuanphan!  Thank You for your response and please accept my sincere apology for not providing a direct link to the page in question.

The page is https://drewlittle.squarespace.com/nike-black-future-movement-af1.