Product Grid images are being cropped

[MarketingAux]

Hello, The image preview in the product grid is being cut, the picture should be 1080*1080 but here it shows less width which make it cropped from the sides,I have the "Ride" Theme, 

please help. Thank You

 https://961sneakers.com/collections/sneakers

Pass : (12345678)

[PageFly-Victor]

Hi @MarketingAux .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code  and add this code on file base.css

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

Hope this helps.

Best Regards;

Pagefly

[MarketingAux]

Didn't work

[MarketingAux]

How can I decrease the height of the product card so the image will show as full?

[hari1_prasad]

Hi @MarketingAux ,

Shopify crop image uploaded to system dynamically by their code proportionally. Since image uploaded by you is proper square 1080 and product card is not proper square, card has hide extra portion.

If you want to show image completely. Please add below CSS in base.css

.product-grid-container .card__media .media img{object-fit:fill !important}

[MarketingAux]

still didn't work

[Uhrick]

hey, MarketingAux, good evening

Can you show how you have added the snippet in the base.css? Send a screenshot if possible for us to see if everything is properly placed?

[MarketingAux]

@Uhrick https://drive.google.com/file/d/1PDpAbz8hpFwxIUfK49pT4hnfG-RBYSLs/view?usp=sharing

[Uhrick]

I have no access, can you set it so that anyone with the link can see it?

[MarketingAux]

gave you access

@Uhrick 

[hari1_prasad]

Hi @MarketingAux ,

Please place below css at very end of your base.css

.product-grid-container .card__media .media img{object-fit:fill !important}

at line no 2964

[MarketingAux]

@hari1_prasad it worked but now images are extended in height 

[Uhrick · Accepted solution]

This is how your code looks starting on line 2956:

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }
.card__media .media img{
object-fit: contain !important;
}
.product-grid-container .card__media .media img {object-fit: fill !important;}
}

It should look like this to show the whole image without extending it:

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }

 .product-grid-container .card__media .media img{
   object-fit: contain !important;
 }

}

[MarketingAux]

@Uhrick  Thank you very much it really worked, but how can i make the hero in the homepage excluded from this code and show image as "cover" 

[Uhrick]

hey, this specific code won't affect the hero. Its selector is for the images of the product card only

[aelitzer]

I'm running into this same issue with Craft, but it appears to be distorting my images.

 

When I remove the additional code you suggested above, the distortion is avoided, but the cropped appearance returns.

Any advice?