Image Banner on Mobile not Showing Full Photo as Shown on Desktop

Store Design
1

Hi, I am having trouble with my image banner on mobile. For desktop the full photo fits in the image banner, but for mobile the top, bottom and sides are chopped off. The full image is not being used in the banner. I have tried adding code I found on numerous community pages. but nothing is working for me. Can someone please help

1.png
1.png1920×1020 254 KB

2.png
2.png1920×1020 439 KB

2

Hi @magneticprints ,

Can you please send me preview url of the store?

Thank you

3

@magneticprints Please provide website url

4

Sure. magneticprints.com.au

5

Hi @magneticprints ,

Can you please try adding below css to the base.css file?

@media (max-width: 767px) {
    .animate--fixed > img:not(.zoom):not(.deferred-media__poster-button) {
        position: unset;
        height: -webkit-fill-available;
    }
}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

6

Thank you LuffyOnePiece! That works brilliantly!