Making Image responsive for Mobiles

Nothing comes up on your website so I don’t know exactly what CSS your images use.

I have made site live for you
Thanks

I still don’t see anything and notice you use wp-rocket. Maybe clear the cache?

The cache cleared, we have it in demo mode at the moment so no one can purchase anything while it is live, the problem is only with mobile phones, the 2nd large image looks squished, long compared to how it looks on the computer and laptop.

I don’t know whether you will be able to see the image either with the demo mode on, let me know and I can remove that for 30 min or so, thanks

Its the image when you go into the shop, then into a category then the listing of all products and add to cart images are there, then when you click on an individual image and it goes into that next page, the single product page because we have it set on 400 x 400 px the mobile makes it go long rather than in proportion.

Ipads, computers, laptops are all good and it is good in landscape mode on mobiles just not portrait.

We need the images to be 400 x 400px as we have a lot of ederly customers and they require larger images.

Thanks for taking a look.

I see the problem happens when you’re in a single product page viewing one product and if the window is small the aspect ratio of the image will change to fit the screen.

The problem is with other CSS forcing the images to be 400px high and wide. To fix this you can simply add this CSS code. Using max-height/width instead of height/width seems to fix the problem.

.woocommerce div.product div.images img {
    max-height: 400px;
    max-width: 400px;
}

Or to keep images at 400px you would do this instead.

.woocommerce img, .woocommerce-page img {
    max-width: none;
}

I will try it, should I delete the other first?

I tried the first code and it made the size of the image go to 400 x 400px and looked a little bit silly on the phone it made the psage go a little bit floaty and move a lot. I would like to keep the look on the laptops, computers and ipads at 400 x 400px but make the mobile phone a little more in proportion if that makes sense, even if it means making the portrait size on the mobile a little smaller

I will try the second code now

The second code does the same thing, both look the same. When you have the long image, the image that is out of proportion there and you click on that another lightbox comes up, it is that size and proportion image i would like in there just for portrait mobiles displays, if possible some how.

I tried this but it didn’t work either

@media only screen and (max-width : 320px) {
.woocommerce div.product div.images img {
box-shadow: none;
display: block;
height: 300px;
width: 300px;
}
}

Hi
the way to go wil lbe to have
@media (max-width: 480px) {

.woocommerce div.product div.images img {
   max-width: 100%;
  }
}

Thanks Cinghaman,
We just found that fix and it worked a treat we have used this code:
.woocommerce div.product div.images img {
box-shadow: none;
display: block;
max-width:90%
}

and it works well enough for us on all devices.

Thanks for your help

Glad it worked out for you.
Cheers
Robin

Thank You both