Product Gallery Slider cropping photos on different mobile views

[Domisana]

HI, my website is domisana.com

Even though I always crop my photos square I noticed that different phones change image ratio so that some of my products have cropped photos

Example my mobile

 

Example some other screen mobile

Can this be fixed, so that gallery slider always keep locked 1:1 aspect ratio for photos, not crop them depending on the screen size,

Thanks

[DaisyVo · Accepted solution]

@Domisana 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.product__media img {
    object-fit: contain !important;
}

Here is the result: 

I hope this helps 

Best,

Daisy

[Dan-From-Ryviu]

Hi @Domisana 

You can solve this issue by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

@media (max-width: 749px) {
.product__media img { object-fit: contain !important; }
}