How can I make all product images the same size?
Topic summary
OP seeks a way to make all product images display at a uniform size in the product grid. An initial attempt caused images to expand and fill the entire screen.
Proposed fix: adjust CSS in the theme. Steps: Admin → Online store → Theme → Edit code → open theme.scss.css and append a media query targeting max-width: 749px that sets .grid-product__image-wrapper { height: 258px !important; }.
Effect: on mobile, all grid product images will have a fixed 258px height, creating a consistent visual size. Screenshots illustrate the before state and the mobile result.
Scope/limitations: the provided CSS targets only mobile (≤749px). Desktop behavior is not addressed in the shared solution.
Status: a solution is proposed with implementation steps and expected outcome on mobile. No confirmation from the OP yet; resolution remains unconfirmed.
1 Like
This is not working sadly, the picture is now filling the whole screen.
Hi @KimGottwald ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file theme.scss.css. And add this code snippet to the end of the file.
@media only screen and (max-width: 749px) {
.grid-product__image-wrapper {
height: 258px !important;
}
}
Step 3: Save your code and reload this page.
=>> The result: All grid product have height 258px, Products the same size on Mobile
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!