Support » Plugin: WooCommerce » Image gets squished to the side when zooming on mobile

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Remi Corson

    (@corsonr)

    Automattic Happiness Engineer

    Hi there,

    I just tested on mobile and to me, it looks good:

    https://cld.wthms.co/9Uignm

    Which phone/OS are you using?

    neoone

    (@neoone)

    Try to zoom in with two finger gesture..

    Plugin Support Remi Corson

    (@corsonr)

    Automattic Happiness Engineer

    Yes, I see. In most cases, this kind of issue is tied to a conflict. Conflicts can introduce javascript errors or CSS weirdness.

    Let’s try a theme/addons conflict check as a first step:

    – You can use [Health Check](https://wordpress.org/plugins/health-check/) for this. It allows you to deactivate all plugins and activate a default theme just for your user session.
    – Everyone else will see your site normally.
    – Activate the plugin and enter the “troubleshooting mode” by adding wp-admin/index.php?page=health-check&tab=troubleshoot to the dashboard URL, for instance: `https://yoursite.com/wp-admin/index.php?page=health-check&tab=troubleshoot. You can then do a test again. Troubleshooting mode also allows you to selectively toggle plugins back on.
    – Here is a quick tutorial: https://docs.woocommerce.com/document/troubleshooting-using-health-check/ – The plugin requires a default theme like Twenty Nineteen present to work fully.

    Alternatively, you can choose to do this manually as per the following docs:

    https://docs.woocommerce.com/document/how-to-test-for-conflicts/

    Switching to a default theme and deactivating plugins is the first step in troubleshooting issues. That allows us to target the culprit quickly.

    neoone

    (@neoone)

    Thanks. I’ll also check console in mobile developer mode. Haven’t done that.

    neoone

    (@neoone)

    I resolved this with these debugging steps:

    1. Enable Chrome Developer Tools
    2. Turn on mobile device emulation (ex. Pixel 2)
    3. Open product image for zoom
    4. Inspect img tag CSS classes (I found .pswp__img class)
    5. Google for “pswp__img image zoom stretch”. Found out this is Photo Swipe plugin.
    6. Google for “Photo Swipe image zoom strech”. Found out “max-width:100%” in “.woocommerce img” class clashes with same attribute in “.pswp__img” class.
    7. Set “max-width” or “max-height” (in my case “max-width”) to “none”.

    Eureka!

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