Woocommerce failing to resize image width in product page beyond 50%

Hello,
I am trying to customize the width of the image container in Woocommerce’s product page.
I am using Woocommerce as a plugin for Avada.
I want a landscape oriented image to go around 60% of the page thus reducing the description on the right to 36% (There should be a 4% spacing).

Now, I am applying this code to the custom CSS:

/* Image Width */
.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
width: 60%;
}

/* Container to the right width */
.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
width: 36%;
}

Now, if the image width is <50, it works. If image width > 50, then the whole summary goes at the bottom of it .
the trick only works when I REDUCE the image size but not when I try to make it bigger.

I also tried to add the float left and right options to the CSS but the problem remains.I have found few instances of this same problem being resolved but still they don’t apply to me, unfortunately I have no real coding skills. Sorry if this is the wrong forum but I just want to make it sure.

My Avada is up to date.
Unfortunately the website is not online yet but if needed for troubleshooting I will upload it asap.
Many thanks in advance,
Alex