Product images cropped in mobile version

Site URL: https://www.maldire.com/

My website has the products in the lovely gallery mode "wrap" when looking at the desktop version, here is an example:

https://www.maldire.com/shop/p/lady-hillingdon-basic

When I go to the phone version it becomes a gallery slideshow badly cropped. I tried using this custom CSS but it doesn't make any changes:

/* Mobile Product Image */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

I just want the images with the full height and no crop.

Any ideas?

Thanks

That worked perfectly, thank you so much!

Hi,    

On 8/6/2022 at 1:18 PM, paul2009 said:

The 'Wrap' PDP Layout has separate layouts for desktop and mobile, so you'd need to use:

img.pdp-gallery-slides-image {
    object-fit: contain!important;
}

 

Hi Paul2009,

I'm having similar issues to eliamaldire. My url is : www.lulutoddler.com.

My product images are cut off at the top when viewed on a mobile. It does this on all the images but I am most concerned about the ones on my shop section when you click on the product. Is there a code you could please give me to stop this? If so would I have to add this code for each product ? Any help would be greatly appreciated. Many thanks.

31 minutes ago, sjd said:

My product images are cut off at the top when viewed on a mobile.

What happened when you tried the same CSS?  

I'm having this same issue with the mobile product image gallery. I tried copy/pasting the code in custom CSS but it doesn't seem to do anything.

https://desertwillowhome.com/shop/p/benito-sofa

On 5/4/2023 at 11:55 AM, marshallkylex said:

I'm having this same issue with the mobile product image gallery. I tried copy/pasting the code in custom CSS but it doesn't seem to do anything.

 

https://desertwillowhome.com/shop/p/benito-sofa

Try this code

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}