Auto-scrolling logo; images resize on desktop but not on mobile

Good afternoon!

I am working on creating an auto-scrolling logo banner on my website. I followed this guide by Will Myers:

https://www.will-myers.com/scrolling-logo-in-squarespace

This worked great on desktop, but on mobile the images do not resize and instead bleed off-screen. See attached. Not sure what I can add to make the mobile version crop properly.

Any help would be greatly appreciated!

Bumping for great justice.

Hi,

Can you share link to page where you added images on your site?

Sure. Have a look at www.kovered.com. Thank you!

Hoping another bump will save me!

On 9/10/2021 at 8:00 PM, aestevezus said:

Hoping another bump will save me!

Add to Design > Custom CSS

/* Gallery reel images on mobile */
@media screen and (max-width:767px) {
.gallery-reel-item img {
    object-fit: contain !important;
}
}

Hi Tuan. Thanks for trying. That did not make a difference for me. Here is what I currently have for the CSS for that page.

Quote

/* Gallery reel images on mobile */
@media screen and (max-width:767px) {
.gallery-reel-item img {
    object-fit: contain !important;
}
}
[data-section-id='613623a2f6f13b0e87fe27ca']{
  .gallery-reel{
    height:20vh !important;
    padding-left: 0px;
    padding-right: 0px;

    figure{
    filter:grayscale(100%);
    }

    .gallery-reel-controls{
      display:none;
    }
  }
}

Bump. Anyone want to take a stab at this? At my wits end 😞