What is the method to increase product image height in Shopify's Supply theme?

jb92390
Tourist
6 0 3

trying to make my main product photo larger. Tried adding following code but mobile display wasn't good:

<div class="grid-item large--two-fifths" style="width 60%";>

<div class="grid-item large--three-fifths" style="width 40%";>

While this did make the image larger, it is a solution to a different problem. I would like to simply make the product image taller and more prominent.

Here is our website with an example product: https://www.raoofmdderm.com/products/retinol-10x-serum-1oz?_pos=1&_sid=4b0dc5ae6&_ss=r

Here's a reference website for what I'm trying to achieve: https://www.drmtlgy.com/collections/anti-aging/products/retinol-complex-5?gclid=CjwKCAjw9aiIBhA1EiwA...

Thanks in advance for the help!

Replies 3 (3)

Muhammad_Ali_S
Shopify Partner
664 121 183

@jb92390,

Remove the Semi colon and add colon like below.

<div class="grid-item large--two-fifths" style="width: 60%">

<div class="grid-item large--three-fifths" style="width:40%">

 

Supply-Theme-Image-Height-Shopify-Community.png
Hope it helps. 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
jb92390
Tourist
6 0 3

Zeian, thank you for getting back to me with an answer. 2 problems happen when i insert that line:

1) The images still isn't displayed in the same size as the reference website

2) On mobile, everything is jumbled. The pictures with background are overlapping the text, the text is extremely narrow, and the buttons look bad. 

Any other thoughts?

Zworthkey
Shopify Partner
5581 642 1565

Remove Semi colon, 
it will work.