Jump to content

Mobile Gallery Slideshow Reel : Uniform Width

Recommended Posts

Site URL: 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;
    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.


Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.