Banner Image on Mobile adjusts size when scrolling

Shopify Discussion
,
1

Hi,

I am working on the site theothelabel.com and I noticed on mobile that when you start scrolling down the main banner image glitches and the size changes. Is there a way to fix this?

Thanks

3

Hey @JoeyRoo,

I just take a look and cannot see the issue.

it seems this issue is specifically on your device only. If you could share the screen recorded video then I can take a look into it.

Thanks

4

Hi @JoeyRoo

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media (max-width: 749px) {
  .slideshow__slide-bg {
    aspect-ratio: 4 / 5;
    height: auto !important;
  }
  .slideshow__slide-bg img {
    object-fit: cover !important;
    width: 100%;
    height: 100%;
  }
  slide-show.slideshow {
    aspect-ratio: 4 / 5;
    height: auto !important;
}
}

image
image389×556 51.6 KB