Reducing image height on product page in mobile view

[sunstorm10]

Hi Everyone

I have two problem statements. Both are related to how images are showing up on product page and are limited to only the mobile version of my website only as Dawn theme provides good customization options for desktop version.

1. Reduce the image height to say 30-40% (150-200 pixels on a 500 pixel) of screen size. For some products, it is occupying as high 350px. Please refer to screenshot 1
2. Consistency of image height across products. On some pages it is 360px while on some others it is 200px which is ideal - screenshot 2

I am okay with the images getting somewhat cropped. 

[StoreExp]

Hello.

Can you please share your website address?

[sunstorm10]

Hi StoreExp

Thanks for picking this up so quickly. The address of this website is de6595-1e.myshopify.com

[sunstorm10 · Accepted solution]

Hi Everyone

I was tinkering around with various solutions and got the desired output on putting following code. Here's what I did

1. Online Store --> Themes --> Customize

2. Using the drop down in top center which says "home page", navigated to "Default Product"

3. Clicked on Product Information (refer to first screenshot)

4. Scrolled to the bottom to find custom CSS section (second screenshot)

5. Pasted following code

@media screen and (max-width: 767px) {
   .product-media-container.constrain-height .media {
      padding-top: 33vh;
   }
}

Hope this helps anyone else looking for a similar solution!