Correctly size the main product image

[avk9641]

Hi,

I have been trying to resize the image in my main product (section-asset-main product) to match the width of the multi row image below (asset-component with image).

Also, when I resize the page, the main product image does not scale properly and is distorted with the text next to it, whereas the multi row images scale properly and the text to the right is contained.

Store link: https://jt9spsr02tizkasg-66469920945.shopifypreview.com

P/W: maongu

Help, with formatting the CSS code is much appreciated!

[Artzen_tech]

Hi @avk9641 
Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.
1) Go to your Online Store
2) Edit Code
3) Find CSS File
4) Add the following CSS

or change the existing CSS code with the below code I have mentioned. This existing CSS is written in section-main-product.css you can update there, and if you don't find it their then add the below css which I have shared. 

@media screen and (min-width: 990px){
.product--large:not(.product--no-media) .product__info-wrapper{
  max-width: 33%!important;
}
}

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

[avk9641]

that did not work