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.
Please share your site url.
So that i can check and let you know the exact solution here.