How to force the original aspect ratio on banner images on mobile?

Solved

How to force the original aspect ratio on banner images on mobile?

Ontarni
Tourist
7 0 0

Mobile image banners don't scale properly in Dawn. I used separate image banners for mobile with the recommended 800x800.

 

I used a code in base.css:

@media screen and (max-width: 749px) {
.banner__media { height: auto !important; }
.banner__media img { object-fit: contain !important; position: relative !important; }
}

 

And it resolved an issue on the mobile view from shopify store: 

Click to expand...
Screenshot 2024-06-26 4.02.29 PM.png

But when opening the store on my phone it looks **bleep**ty:

Click to expand...
Screenshot_2024-06-26-15-22-57-630_com.android.chrome (1).jpg

 

I tried different ratios to do it without a code, but in that case on some mobile phones it looked perfectly, but on different didn't and every picture was scalling differently. 

 

The best scenario is to force shopify to show the original aspect ratio on every mobile for every image, as I am trying to add multiple image banners one after another to create one long picture.

 

Store link: https://fbbf11-37.myshopify.com/

 

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@media screen and (max-width: 370px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 30rem !important;
    }
}
@media screen and (min-width: 400px) and (max-width: 749px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 36rem !important;
    }
}

@Ontarni you can try it

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

BSS-TekLabs
Shopify Partner
635 177 207

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (max-width: 370px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 30rem !important;
    }
}

- Here is the result you will achieve:

BSSTekLabs_0-1719408632422.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Ontarni
Tourist
7 0 0

Thank you!

It works on two mobile phones that I checked, but on the third one (iphone 14) it looks like this whenever photos from image banners meet:

Click to expand...
IMG-20240626-WA0001 (1).jpg

What might be the issue?

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@media screen and (max-width: 370px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 30rem !important;
    }
}
@media screen and (min-width: 400px) and (max-width: 749px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 36rem !important;
    }
}

@Ontarni you can try it

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency