Solved

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

magneticprints
Tourist
11 0 0

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

2.png

Accepted Solution (1)

LuffyOnePiece
Shopify Partner
512 78 94

This is an accepted solution.

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 5 (5)

LuffyOnePiece
Shopify Partner
512 78 94

Hi @magneticprints ,

 

Can you please send me preview url of the store?

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

Hardik2903
Excursionist
55 6 7

@magneticprints  Please provide website url

magneticprints
Tourist
11 0 0

Sure. magneticprints.com.au

LuffyOnePiece
Shopify Partner
512 78 94

This is an accepted solution.

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
magneticprints
Tourist
11 0 0

Thank you LuffyOnePiece! That works brilliantly!