Product page images stretched on mobile for some products

Hi,
I’m experiencing an issue on mobile where some product images appear stretched, while others display correctly. I’ve attached a photo as an example.

I’ve already checked caching and lazy loading, so I don’t think it’s related to that. Does anyone know what might be causing this and how to fix it?

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Please share your WP-ADMIN login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

I leave credentials in the private area

Hi, have you done anything yet? How’s it going? I still see the same things wrong…

Hello,

I’m currently unable to access your site due to IP restrictions. Kindly remove these restrictions so I can review the issue. I’m accessing the site from Pakistan.

Best Regards,

ok removed, try now

have you fixed it?

Hello,

Sorry to say that I am not able to log in or access the WP backend because you have activated the maintenance mode and the default login URL redirects me to the maintenance page. So please send the WP admin login URL so I can further check on your site and give you a possible solution.

Best Regards,

Ok. Please watch the private content now.

Hello,

I have checked your site and the product image is not stretched on mobile.

See screenshot for clarification: https://postimg.cc/8sK4xfN0

Please clear your site cache/ server cache/ browser cache, and check if the problem persists.

Best Regards,

It’s not true, it’s still difficult to see; some images are distorted, while others are. Once you enter the product page, it appears stretched, but when you reload the page, it’s clear. Take a closer look. I’ll leave you the updated credentials in the private content.

Hello,

Please share the product page URL where the issue persists, so I can check the issue directly and provide you with a possible solution.

Best Regards

https://susotta.it/prodotto/pom-cuvee-misto-200ml-x24/

https://susotta.it/prodotto/pom-cuvee-gialla-200ml-x24/

photo attached

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your given product, and the images are showing fine.

See Screenshot for clarification: https://postimg.cc/wthrBP7p

Please clear your site cache/ server cache/ browser cache, or check the issue in the incognito window if the problem persists.

Best Regards,

Hi,
So, after you replied the images were showing correctly, but now they’re stretched again and look bad.
I tried clearing cookies and cache but it didn’t change anything.
If you check them in incognito mode, you’ll see they look distorted — it seems totally random, so I’m not sure what the issue could be.

Could you please give me a definitive solution? I’m also willing to recreate the images in different dimensions if needed.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site, and then check the issue. I am sure your issue will be solved. Then activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and share the WP login details, so I can check and give you a possible solution.

Best Regards,

Hi,
I’ve found the cause of the issue. A few weeks ago, I had added this custom CSS:

.product-images img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: 280px;
}

I have now removed this code. It was the reason the images appeared stretched before.

Now, when accessing the site from mobile, the product images look fine, but they are too large.
I would like to reduce the image size only on mobile, without touching CSS that prevents the stretching issue, to avoid breaking it again.

Could you advise the best way to do this?

Thanks a lot!

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS:

.woocommerce-product-gallery .woocommerce-product-gallery__image {
    max-width: 250px;
    max-height: 400px;
    width: auto;          /* preserves aspect ratio */
    height: auto;         /* preserves aspect ratio */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Best Regards,

Hello,
I already tried adding the custom CSS code in Theme Settings > Custom CSS, but it still doesn’t work. You can check it yourself. I already shared the login credentials in my previous messages/posts.

Let me know, thank you.

Hello,

Please now check back your site and check the issue after completely clearing the cache. I have added the custom css in Theme Settings > Custom CSS > Custom CSS for mobile and it is working fine.

Best Regards,

[Author]

Posts