Responsive Product Image Size

Highlighted
Tourist
13 0 0

Hi there,

 

I'm trying to build out my product page template, and it's going well. But when resizing my browser window, the product image keeps it's aspect ratio. The image container is set to 50%, so the remaining 50% contains the product title, description, pricing and add to cart button. When resizing the browser window, the image height becomes so small and the product description height begins to increase dramatically. This causes a massive white-space underneath the image.

 

I'm looking to have the height of the image respond to the change in width. I think the solution will be two pronged:

 

1. Getting the right code written to allow for a responsive height and width change;

2. Having the right aspect ratio (right now my product image is more horizontal than vertical, having a more vertical image could help)

 

Looking for some advice! Let me know if you need more information.

 

Thank you!

0 Likes
Highlighted

Hello ,

Please share your site url.

So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
13 0 0

Hi oscprofessional,

 

Please take a look at the page in question here: https://fleurframes.com/products/story-test-product

 

Thank you,

marc_checche

0 Likes
Highlighted
Tourist
13 0 0

Hi @oscprofessional ,

 

Seeing if you had a chance to look at this.

0 Likes