Product Image

[Testing120]

My Product Page first image of product start showing to small on mobile and desktop both as seen below:

Then I added following code in my theme file editor /assets/base.css
" .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
height: 500px !important;
} 
"

after using this code my image start showing good on desktop device but on mobile device it start showing starched image

Like this on my mobile:

[HasnainDEV]

What's the URL of your store?

[Testing120]

https://halawaorganic.com/

[HasnainDEV]

You can replace in base.css file. Use Width and Height 100% this will fix for both desktop and mobile view without product image stretch.
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 100% !important;
height: 100% !important;
}

[Testing120]

tried your code didn't worked

results: 

[Testing120]

any different solution ?