Image distortion at Zoom

[alexeyzuew93]

Good afternoon, Comrades! It’s my first time with You and I hope we can be friends. I’ll get right to the problem. Site on which under approximation images, it is distorted and runs away in left side, has tried to change plugins, understood that the problem in topic, so as in your demo version of, too, most, under open and approximation image of the changes the size of the until size in 1354px, that to do?

[Yazmin]

Please let me know the URL of your website or page so we can take a look to see what is happening.

[alexeyzuew93]

https://inza.store/product/kalobeige/

[Yazmin]

Thank you.

I cannot see anything wrong.

The image that you are using is 4096px x 2890px but it is slightly blurry in the original image size.
Maybe you could resize the original image to something like 2048px x 1445px? and it would still be large enough but it wouldn’t look blurry

[alexeyzuew93]

it’s on a smartphone

P.S. On computer, too, is compressed, but Ude less, Resolution 2048*1445

Edited to remove hotlinked image and use uploaded image instead

• This reply was modified 5 years ago by Andy.
• This reply was modified 5 years ago by Andy. Reason: removed hotlink image and uploaded image

[alexeyzuew93]

The same problem I see and you have in the demo version of retail, please see that the image whose width is higher than 1353px, and just look at your mobile version, the image is more broken.

[Andy]

We do not see any error. It looks normal when we view your site on a smartphone (and desktop is also okay). Tested with android and iphone.

See screenshot:

Could you please view our other theme’s demo to see if you see the same problem also?
Demo links:
Trusted
Azuma

[alexeyzuew93]

try to zoom in on my and on your website on your smartphone and on your computer. This is a problem I have on different browsers and on different smartphones both on Android and iPhone

 

[Andy]

It works okay without any problems when I view your website and also our demo is okay too.

We need to find out if this is an issue with WooCommerce or with our theme, so this is why I asked if you could look at our other theme demos to see if you see the same problem.

Could you also please look at the demo for the WooCommerce Storefront theme, to see if you have the same issue? Link here: https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/

[Andy]

Although we cannot recreate the same problem that you are seeing, I think it may be a CSS conflict between the main WooCommerce stylesheet and WooCommerce’s photoswipe stylesheet that is causing the problem that you are seeing.

Could you please try adding this CSS code to ‘Customize’ > ‘Additional CSS’:

.pswp img {
    max-width: none !important;
}

Let me know if that fixes the issue.

[alexeyzuew93]

It’s amazing! Fix it! Thank you very much, it Seems so elementary, but I did not understand what else can be done, and only You helped!

• This reply was modified 5 years ago by Andy.
• This reply was modified 5 years ago by Andy. Reason: removed hotlinked image

[Andy]

That’s great. Thanks for letting us know.

The issue is that the WooCommerce plugin loads the …/plugins/woocommerce/assets/css/photoswipe/photoswipe.css stylesheet which contains this rule:

.pswp img {
    max-width: none;
}

and then afterwards the …/plugins/woocommerce/assets/css/woocommerce-layout.css stylesheet which contains this rule:

.woocommerce img,
.woocommerce-page img {
    height: auto;
    max-width: 100%;
}

so the max-width: 100% is overriding the correct CSS rule. The zoomed image can be more than 100% wider than it’s container, so this is sometimes restricting the image width.

I don’t like using !important unless absolutely necessary so it should work without it. The custom CSS is loaded after woocommerce-layout.css so will reset the max-width to how it should be.

.pswp img {
    max-width: none;
}

[Andy]

Update: WooCommerce version 3.8.0 has just released with a fix for this issue, so you can remove the custom CSS if you update WooCommerce to the latest version.

[Author]

Posts