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)
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
Didn’t work
How can I decrease the height of the product card so the image will show as full?
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}
still didn’t work
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?
I have no access, can you set it so that anyone with the link can see it?
gave you access
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
@gr_trading it worked but now images are extended in height
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;
}
}
@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”
hey, this specific code won’t affect the hero. Its selector is for the images of the product card only
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?
Where exactly is this code to replace in the code editor?
This works perfectly, thanks!
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
hi Ndo, it’s been some time, but I believe it was in the base.css file
