Product Image Issue

[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:

[BSS-TekLabs · Accepted solution]

You can try add this code @Testing120 

@media only screen and (min-width: 600px) {
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
height: 500px !important;
}
}
@media only screen and (max-width: 600px) {
 .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 300px !important;
height: 300px !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs]

Delete the old code and replace it with the code above @Testing120 

[Testing120]

let me try 

[Testing120]

super this code work

[BSS-TekLabs]

Glad to help you. Have a good day.

[AK_Design_Dev]

Hello @Testing120 

Don't use fixed width and height, 

Use both 100%