Making product images the same height on Dawn Theme

Topic summary

A user sought CSS code to standardize product image heights on their Shopify store using the Dawn theme, rather than manually resizing and re-uploading images.

Initial Attempt:

  • Tried adding CSS targeting .product-media-container to base.css, but this didn’t work
  • Included screenshots showing inconsistent image heights across product listings

Solutions Provided:

  1. CSS Class Correction: One respondent noted the class name was incorrect and suggested using .product__media-list or .product__media instead

  2. Theme.liquid Method: Another user provided step-by-step instructions:

    • Navigate to “Edit Code” in the theme editor
    • Locate theme.liquid file
    • Paste specific code below the <head> tag
    • Included a reference screenshot

Outcome:

  • The original poster confirmed the solution worked successfully
  • Issue resolved without needing to manually resize images
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

Hello! I would like all of my product images to be the same height. I know I could go through a resize them all and re-upload, but I’m wondering if there is any code I could use?

I have tried adding this to the bottom of my base.css but it didn’t work. I may have the wrong classes though!

Screenshot 2024-02-11 at 10.18.23.png

Here is my URL and I am also using the Dawn theme - any help would be appreciated thank you! :slightly_smiling_face: Example images below of the different height sizes.

https://www.designedbyleanne.com/products/personalised-cat-print-a4-a3-5x7-digital-beautiful-wall-art-of-cats-looking-at-birds-outside-window-unframed

Hi @DesignedLeanne

Yeah, not sure where you got that product-media-container class. I have not seen it in the source code.

So try with

.product__media-list .product__media

Should work with no issues.

1 Like

Hey @DesignedLeanne ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

2 Likes

This worked - thank you so much! :slightly_smiling_face:

1 Like

Thank you!! :slightly_smiling_face: