Add This css In your Edit Code > Base.css File
@media screen and (max-width:767px){
.card__media .media img {
object-fit: contain !important;
}
}
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.