stop croping in mobile view on product images

Site URL: http://whitehartvintage.com

I am having a hard time finding the right ccs code for my website. My product images keep getting cropped in mobile view and when I put this code in it seems to help but then when you click the image for the lightbox to appear they get cropped again. My website is not launched yet so I can send pictures or videos. 

@media screen and (max-width: 767px) {
    .tweak-product-basic-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before {
        padding-bottom:0
    }

    .ProductItem-gallery-slides-item {
        position: static;
        height: auto;
        overflow: initial
    }

    .ProductItem-gallery-slides-item.selected .ProductItem-gallery-slides-item-image {
        left: 0 !important;
        top: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: 100%
    }
}

Hi. Try remove your code & adding to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item.selected .ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

On 3/15/2021 at 8:53 AM, tuanphan said:

Hi. Try remove your code & adding to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item.selected .ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

 

Hi @tuanphan I'm having a similar issue with my site - on the product details pages on desktop the images show in full, vertical 2:3  (I'm using the 'half' format in product details page styling which gives no options for style tweaks - screenshot attached) However, when viewed on mobile the images crop to square. Is there any way around this, to keep the images as vertical 2:3 on mobile? Thank you 🙂

On 4/1/2021 at 1:19 AM, Toots said:

Hi @tuanphan I'm having a similar issue with my site - on the product details pages on desktop the images show in full, vertical 2:3  (I'm using the 'half' format in product details page styling which gives no options for style tweaks - screenshot attached) However, when viewed on mobile the images crop to square. Is there any way around this, to keep the images as vertical 2:3 on mobile? Thank you 🙂

Hi. Can you share link to product in screenshot? We can help easier