Popup Pro scales featured image vertically

Hey all,

Popup Pro is scaling my featured image really strangely. I've tried several different sizes, and they either come out vertically stretched or wildly zoomed.

In both screenshots the image is 600x266.

Thanks!

  • Michael Bissett

    Hey @Adam,

    That odd styling you're seeing there is due to the CSS code that comes with PopUp Pro. In your case, you're going to need something a little different:

    @media screen and (min-width: 320px) and (max-width: 770px) {
    
    .wdpu-middle > .wdpu-image {
        text-align: center;
        max-height: 275px !important;
    }
    
    .wdpu-middle > .wdpu-image > img {
        width: auto;
        height: auto;
        margin-top: 0 !important;
    }
    
    }
    
    @media screen and (min-width: 771px) {
    
    .wdpu-middle > .wdpu-image {
        line-height: 14em !important;
    }
    
    .wdpu-middle > .wdpu-image > img {
        height: auto !important;
        vertical-align: middle !important;
    }
    
    }

    Try sticking that into Simple Custom CSS, and let me know if it works for you please. :slight_smile:

    Regards,
    Michael

  • Michael Bissett

    Hey @Adam,

    I've dropped the CSS in, cleared the cache and I'm still seeing warping.

    Hmm, that's odd. Looking at the page, it looks like the code isn't even being loaded. Could you enable Support Access to your site, so I can have a closer look at things here?

    What is it about my case that requires tweaked Media Queries?

    Due to the size of your image, not only is some CSS code required to stop the stretching from the desktop perspective, but there's also some CSS code required to make sure that the image isn't clipped/stretched on the mobile side of things as well.

    The mobile side of things needed a little different treatment, hence the use of media queries. :slight_smile:

    Regards,
    Michael

    • Adam

      Access granted.

      Hm. I looked at the size of the div (without padding) and tried placing an image there at precisely those specs, which was zoomed considerably, so that it clipped as well.

      Thanks again, @Michael Bissett.

      FYI, a user may also be having trouble getting popups to disappear for 3 days (as they're set to), and is being prevented from using the site. She wrote yesterday, and I'm waiting for clarification before opening a new forum post.

  • Michael Bissett

    Hey @Adam,

    Found the problem! I noticed that you were using My Custom CSS on your site, seems like it wouldn't process the media query unless it was entered as:

    @media only screen

    After tweaking that, I'm now seeing that it's resizing properly on my end. :slight_smile:

    On a side note, while inside the Dashboard, I noticed that you had the "Hide image for mobile devices" box checked (didn't see that in the earlier screenshot), so the code that I provided for the mobile side of things won't be necessary now.

    Here's the final code:

    @media only screen and (min-width: 771px) {
    
    .wdpu-middle > .wdpu-image {
        line-height: 14em !important;
    }
    
    .wdpu-middle > .wdpu-image > img {
        height: auto !important;
        vertical-align: middle !important;
    }
    
    }

    FYI, a user may also be having trouble getting popups to disappear for 3 days (as they're set to), and is being prevented from using the site. She wrote yesterday, and I'm waiting for clarification before opening a new forum post.

    That's fine, we'll be glad to help once you get the clarification from her. :slight_smile:

    Regards,
    Michael