Supply Theme Image Height

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!

0 Likes

@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. 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes

Remove Semi colon, 
it will work.

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
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?

0 Likes