Hello,
Is there a way for me to make my products pictures all one size? I would like there to be two pictures per row.
Here is an example of what I want:
Here is what mine looks like:
Thank you
Topic summary
A user wants to standardize product image sizes and display two images per row on their store. They provided screenshots showing their current layout versus their desired uniform grid layout.
Two CSS solutions were offered:
-
First approach: Edit the
base.cssfile by adding CSS targeting.product__media-list .product__media-item.is-activewith a calculated width property using CSS variables for grid spacing. -
Second approach: Add CSS to
main.css(orbase.css/style.css) using a media query for desktop screens (min-width: 900px) that targets product media items, setting width and max-width tounset.
Implementation steps for both solutions:
- Navigate to Online Store > Themes > Edit code
- Locate the appropriate CSS file
- Paste the provided code at the bottom of the file
- Save changes
Both responses included before/after screenshots demonstrating the uniform image sizing result. The discussion remains open for the original poster to test these solutions.
1 Like
Hi @YIVAN
you can try this way:
- Online Store => Themes => edit code
- search file “base.css” and scroll down to the bottom
- paste this code:
.product__media-list .product__media-item.is-active{
max-width: calc(50% - var(–grid-desktop-horizontal-spacing) / 2)
}
Result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Hi @YIVAN
Check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file
@media screen and (min-width: 990px) {
.product:not(.product--columns) .product__media-list .product__media-item:first-child {
width: unset;
max-width: unset;
}
}
And Save.
Result:
