Need Product list images to "fit" instead of "fill" 7.1

Hello!

(SquareSpace 7.1)

I'm setting up a site for a group of artists so there is no way that the Product images can be the same size. Result is that the images are cut off in the Product list (see example url).

I got the Product detail images to work by adding the code below but none of the code solutions for the Product list work (let me know if you want me to list all of the code solutions that I tried). 

/* This code worked for product detail images */

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

Any suggestions?

Lori
 

Hi,

Can you share link to product list page? We can give the code

Hi @tuanphan- I posted in another area and you gave me code to fix it :-).

Here's the code that you gave me that fixed it:

.products.collection-content-wrapper .grid-item img {
    object-fit: contain !important;
}

Thanks again - you're the best!!

I am having a similar problem, some of my images are being cut off in my shop product pages no matter what size or ratio I make them. Will this code fix this for me and where do I enter the code to correct this?

On 6/7/2023 at 1:19 AM, ellenann said:

I am having a similar problem, some of my images are being cut off in my shop product pages no matter what size or ratio I make them. Will this code fix this for me and where do I enter the code to correct this?

Yes. That code should fix problem on Shop Page.

Thank you thank you thank you, it worked!