Product images are being cropped.

I have seen this asked elsewhere, but none of the solutions I have found have worked for me.

Is there a way I can get these product thumbnails to display the full image on my store page? Currently they are cropped as seen below.

I have some that are landscape orientation, so I would prefer a solution that allows those to appear in full as well, but I will be happy enough to have a solution that shows full portrait-orientation images.

Thank you!

https://www.theochandler.com/purchasescores

following.. same problem here.. would be great to "ajust the image" instead of just "crop" as we can do in the image block. 

On 3/9/2023 at 11:37 AM, Tchan said:

I have seen this asked elsewhere, but none of the solutions I have found have worked for me.

Is there a way I can get these product thumbnails to display the full image on my store page? Currently they are cropped as seen below.

I have some that are landscape orientation, so I would prefer a solution that allows those to appear in full as well, but I will be happy enough to have a solution that shows full portrait-orientation images.

Thank you!

https://www.theochandler.com/purchasescores

Add to Design > Custom CSS

.ProductList-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}

Thank you!

This, combined with changing the image dimensions in Site Styles, helped!

On 3/10/2023 at 3:57 AM, tuanphan said:

Add to Design > Custom CSS

.ProductList-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}

 

Hello, I'm having the same trouble. I tried adding the CSS script but I'm obviously not doing it right. Any thoughts? Thank you.

On 3/21/2023 at 11:01 PM, Kanzen_Industries said:

Hello, I'm having the same trouble. I tried adding the CSS script but I'm obviously not doing it right. Any thoughts? Thank you.

 

 

Hi,

Can you share link to your site?

Hello, I'm having the same issue with the suggested CSS not doing anything.  I also tried the following code that should work with 7.1 but its also not doing anything (found in this post)

Quote

.grid-item-image, // both images
.grid-image-cover, // start image?
.grid-image-hover // hover image?
{
  height: 100% !important;
  left: 0 !important;
  object-fit: contain;
  object-position: center center;
  top: 0 !important;
  width: 100% !important;
}

I looked in dev tools to make sure the element name is correct, and it appears to be a.grid-item-link.product-lists-item.  I tried multiple variations of that with the code above and nothing is working.  

Site is https://www.fritzmodern.com/art and password is "lightning"

Thanks

On 9/15/2023 at 9:06 PM, fritzmodern said:

Hello, I'm having the same issue with the suggested CSS not doing anything.  I also tried the following code that should work with 7.1 but its also not doing anything (found in this post)

I looked in dev tools to make sure the element name is correct, and it appears to be a.grid-item-link.product-lists-item.  I tried multiple variations of that with the code above and nothing is working.  

Site is https://www.fritzmodern.com/art and password is "lightning"

Thanks

I see you solved with this code?

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

Hoping for some help the product images in my check out cart are getting cropped anyone able to share some code that might help? Thanks https://harmonica-groundhog-fetn.squarespace.com/store or

www.mdezz.com

Hi @MDEZZ ! First off, I love your work. Are trying to display them like this? If so you might want to try this:

.cart-row-img-wrapper > div {
  background-size: contain;
}

Well thank you very much for the compliment. Photography- no problem..coding...? Another story. Thanks for that snippet! Silly question same problem on MOBILE when I look at my individual product page (see attachment)- anyway to fix this user exp?

@MDEZZ I see you changed the background sizes for these. To make it more accessible you should make the counter and the arrows white

Hey iamaziz I think your suggestion is a good one but no clue how to do that....:( Tips by chance? TIA ALSO: anyway to get the price to show up under the "sizes"?