New to the community? Start here

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!

Michelle Shull
- DEV MAN’s Apprentice: Earn your WPMU DEV membership
- 1,168 pts: Hero points 8,417 pts: Rep. points LEVEL 26
Hello, Adam!

Firstly, that's the cheeriest porn logo I've ever seen. It made me smile. : )

Second, do you have the pop-up set up to be responsive, or is it a fixed width/height? Can you snag me a screenshot of the settings for this pop up, and the general settings for PopUp Pro? I think we can get this sorted pretty quickly!

Thanks!
- Adam
  - The Incredible Code Injector: Earn your WPMU DEV membership
  - 123 pts: Hero points 430 pts: Rep. points LEVEL 5
  Hi @Michelle Shull,
  
  Thanks! :slight_smile: I don't know who designed it, but it makes me smile daily.
  
  Here's a screenshot of all my settings.
Michael Bissett
- Recruit: Earn your WPMU DEV membership
- 1,518 pts: Hero points 11,180 pts: Rep. points LEVEL 28
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
- Adam
  - The Incredible Code Injector: Earn your WPMU DEV membership
  - 123 pts: Hero points 430 pts: Rep. points LEVEL 5
  Hi @Michael Bissett,
  
  I've dropped the CSS in, cleared the cache and I'm still seeing warping. What is it about my case that requires tweaked Media Queries?
  
  Thanks,
  Adam
Michael Bissett
- Recruit: Earn your WPMU DEV membership
- 1,518 pts: Hero points 11,180 pts: Rep. points LEVEL 28
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
  - The Incredible Code Injector: Earn your WPMU DEV membership
  - 123 pts: Hero points 430 pts: Rep. points LEVEL 5
  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
- Recruit: Earn your WPMU DEV membership
- 1,518 pts: Hero points 11,180 pts: Rep. points LEVEL 28
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