Support » Fixing WordPress » Lightboxed images get distorted when double-tapping or pinch-zooming

  • Resolved joey4j

    (@joey4j)


    [ Moved to Fixing WordPress ]

    I’m using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
    Images getting distorted on double-tapping
    Any idea what is causing this? It’s not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I’m using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I’m using?

    @media screen and (max-width: 700px) {
        /* basics */
    
        #content,
        #sidebar,
        .endbar_left,
        .endbar_right {
            float: none;
            width: 100%;
        }
        #content {
            margin-left: 0%;
            padding-left: 0%;
            padding-top: 20px;
        }
        html,
        body {
            width: auto !important;
            overflow-x: hidden !important;
        }
        img {
            border: none;
            max-width: 100%;
            height: auto;
        }
        #header {
            padding-bottom: 0 !important;
        }
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • body {
            width: auto !important;
            overflow-x: hidden !important;
        }

    overflow-x: hidden !important; might be a problem. In general, I’d be very suspicious of anything that uses !important. With all due respect, that’s often a sign of sloppy CSS.

    Thanks @esmi for your input! I’ve tried modifying body and img properties a lot, but no luck so far… When I load style.css from Twenty Fifteen theme, the image zooms in proportionally (without getting distorted) upon double-tapping / pinch-zooming. I’ve looked so hard on style.css from Twenty Fifteen theme, and tried to find properties that are making undistorted zooming possible, but can’t spot… Anyway, thanks for your help. Appreciated!

    What theme are you currently using? Where did you download it from?

    I’m using Commune theme from WP repository, but I’ve completely rewritten all the CSS to customize the look, so there’s nothing left from the original style.css file. I believe the solution is just a few lines of CSS. I’ll try debugging. Thanks!

    Just found the solution! You’re right, @esmi, removing !important; but it was from my img properties in the main part of CSS, as seen below (not from @media screen and (max-width: 700px)).

    img {
    	border: none;
    	max-width: 100% !important;
    	height: auto;}

    Thank you for your pointer! Now happy to continue working on the website. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Lightboxed images get distorted when double-tapping or pinch-zooming’ is closed to new replies.