Product image blurry

Hi Philip,

Thank you for your answer. Your solution does sort out the problem of the arrows and the size of the image when viewed on a mobile phone, but it now sends me back to the initial problem. The size of the image on the product page when viewed on a computer is now bigger than the size I set up in the configuration page (500px) and it also goes over the thumbnails and description text.

Is there a css I could enter that would only affect how the image is being seen on the product page when viewed on a mobile phone, without affecting the setting previously chosen for how it appears on a computer screen?

Thank you!

Hi,

Thank you Philip! I'm very new to CSS but I'm trying to learn.

Here is what I've entered that's worked for me:

@media only screen and (max-width: 600px) {
img#hikashop_main_image {
max-width: 100%;
display: block;
}
}