Reducing image height on product page in mobile view

Solved

Reducing image height on product page in mobile view

sunstorm10
Shopify Partner
3 1 0

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. 

Screenshot 2024-06-26 at 7.18.14 AM.pngScreenshot.jpg

Accepted Solution (1)

sunstorm10
Shopify Partner
3 1 0

This is an 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)

Screenshot 2024-06-29 at 4.05.14 PM.png

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

Screenshot 2024-06-29 at 4.05.34 PM.png

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!

View solution in original post

Replies 3 (3)

StoreExp
Shopify Partner
4 1 0

Hello.

 

Can you please share your website address?

Store Experts, LLC | The Expert Shopify Agency to Empower Your Store

- Was my reply helpful? Click Like to let me know!

- Was your question answered? Mark it as an Accepted Solution

- To learn more visit our Website
sunstorm10
Shopify Partner
3 1 0

Hi StoreExp

 

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

sunstorm10
Shopify Partner
3 1 0

This is an 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)

Screenshot 2024-06-29 at 4.05.14 PM.png

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

Screenshot 2024-06-29 at 4.05.34 PM.png

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!