Home Forums Retail Image distortion at Zoom

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #8286
    alexeyzuew93
    Participant

    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?

    #8287
    Yazmin
    Keymaster

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

    #8289
    alexeyzuew93
    Participant
    #8294
    Yazmin
    Keymaster

    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

    #8296
    alexeyzuew93
    Participant

    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 2 weeks ago by Andy.
    • This reply was modified 1 week, 6 days ago by Andy. Reason: removed hotlink image and uploaded image
    #8298
    alexeyzuew93
    Participant

    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.

    #8300
    Andy
    Keymaster

    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

    #8302
    alexeyzuew93
    Participant

    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

     

    #8306
    Andy
    Keymaster

    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/

    #8312
    Andy
    Keymaster

    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.

    #8316
    alexeyzuew93
    Participant

    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 1 week, 6 days ago by Andy.
    • This reply was modified 1 week, 6 days ago by Andy. Reason: removed hotlinked image
    #8320
    Andy
    Keymaster

    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;
    }
    #8324
    Andy
    Keymaster

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.