the product picture is too big and it dosent fit. Please tell me how to adjust it.
Topic summary
A user reports that product images on their Shopify store appear too large and don’t fit properly on the page, sharing a screenshot demonstrating the issue.
Proposed Solution:
A community member provides CSS code to fix the sizing problem by adding object-fit: contain !important; to the base.css file. Two code snippets are shared:
- One targeting mobile screens (max-width: 767px)
- One for desktop view
Implementation Questions:
Another user asks for clarification on where exactly to insert the CSS code within the base.css file, noting that attempts at the beginning and end of the file didn’t produce changes.
Status: The thread remains open with unresolved implementation details. While a technical solution has been offered, the exact placement method for the CSS fix needs further clarification.
1 Like
Share Site Preview Link
Hi @Dino_N
Would you mind to share your store URL? Thanks!
Add This css In your Edit Code > Base.css File
@media screen and (max-width:767px){
.card__media .media img {
object-fit: contain !important;
}
}
Add This Code For Deskop View
.card__media .media img {
object-fit: contain !important;
}
Where at in the base.css do you add it? I have tried it at the beginning and end and nothing changes. Did save and refresh.