Shopify themes, liquid, logos, and UX
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)
Solved! Go to the solution
This is an 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;
}
}
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
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
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}
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?
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
This is an 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;
}
}
@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?
User | RANK |
---|---|
214 | |
145 | |
66 | |
46 | |
45 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023