Why are my product grid images being cropped in the Ride theme?

[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?

[Derek_Bradley]

This works perfectly, thanks!

[ndo]

Worked. Thanks

[gr_trading]

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 

[gr_trading]

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]

@gr_trading 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?

 

[Uhrick]

wow, sorry. I didn't see this. I hope you have solved the problem. If not, send the link here so that I can check

[ndo]

Where exactly is this code to replace in the code editor?

[Uhrick]

hi Ndo, it's been some time, but I believe it was in the base.css file