Adding space between images in reel on mobile

Site URL: https://laurelguido.com

I was wondering how to create space or padding around each of these images (different widths) in my reel on mobile: 

I was able to get the web version correctly and used this code:

@media screen and (min-width: 800px)
{
.gallery-reel-item-src{
  left: 35px
}
.gallery-reel-item img{
      left: -17px;
}
}

here is the link to this specific webpage: https://laurelguido.squarespace.com/stories/sheltered-spring

Thanks!

You can use this to Custom CSS then save & reload the site

@media screen and (max-width:767px) {
    .gallery-reel-item-src{
  left: 35px
}
.gallery-reel-item img{
      left: -17px;
}
 section[data-section-id="61394dfb4e2a4122a75a527f"] .gallery-reel {
        height: 20vh !important;
    }
}

On 9/7/2024 at 6:37 AM, tuanphan said:

You can use this to Custom CSS then save & reload the site

@media screen and (max-width:767px) {
    .gallery-reel-item-src{
  left: 35px
}
.gallery-reel-item img{
      left: -17px;
}
 section[data-section-id="61394dfb4e2a4122a75a527f"] .gallery-reel {
        height: 20vh !important;
    }
}

 

I tried this and this is what it ended up doing:

It made that specific reel section shorter/smaller and it cut off the left and right sides of the images on all reels. 😞 

You can adjust number 20 in the code to adjust height