How can I have all the products pictures the same size?

Store Design

Topic summary

A store owner wants to standardize product image sizes on their product pages, specifically requesting a rectangular format that’s taller than it is wide. The images currently shift when customers select different product variants.

Solution Provided:

  • Navigate to Online Store > Themes > Edit Code
  • Open the base.css (or theme.css/custom.css) file
  • Add CSS code targeting .product-media-container with a fixed height of 500px
  • The media query applies only to screens 750px and wider

Current Issue:
The CSS solution works for some products but not others. The store owner has shared specific product URLs where the code isn’t functioning properly (panda-t-shirt and ramen-t-shirt pages).

Additional Question:
The owner also asks how to change the right-side image by hovering over the left image.

Status: Ongoing troubleshooting - awaiting further diagnosis of why the solution works inconsistently across different products.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi

How can I unify the size of the product on the product page? I’d like a rectangle longer on the y axis

It keeps moving when the customer select a product

simplicityclothing.ca

image.png
image.png697×610 232 KB

image.png
image.png724×735 384 KB

2

Hi @bobylands ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (min-width: 750px) {
    .product-media-container {
        /* You can adjust this value according to your preference */
        height: 500px;
    }
    
    .product-media-container .product__media {
        /* This value has to match the above height */
        height: 500px;
    }    
}

Here is the result

BSSTekLabs_0-1722433673025.png
BSSTekLabs_0-1722433673025.png2879×1599 347 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

3

I’m not sure why but it works with some product, and for some it doesnt :disappointed_face:

Do you know why?

4

Also, how can I change the picture on the right by hovering the mouse over the image on the left? thanks

5

Can you please provide us the URL of some products for which the code didn’t work?

6

https://simplicityclothing.ca/products/panda-t-shirt
https://simplicityclothing.ca/products/ramen-t-shirt?pr_prod_strat=e5_desc&pr_rec_id=5236dfb8c&pr_rec_pid=9741584171317&pr_ref_pid=9741528596789&pr_seq=uniform
and many more