Popup Pro featured image is always distorted/ CTA button is cut off

The Featured Image in Popup Pro is always distorted, and sometimes the CTA button gets chopped off. I have never been able to get the popups to look good.

Please see the following URL, and move cursor to leave the page to see the popup:
http://www.lifetimeinvestor.com/courses/ultimate-stock-investing-system/

My popups are in responsive mode. Changing it to fixed size made the image distortion worse.

Michael

  • Ash

    Hello @mikobee

    I hope you are well today and thanks for asking the question.

    Please try the following css:

    .wdpu-image img {
        height: auto !important;
        width: 100% !important;
    }
    .wdpu-buttons {
    box-sizing: content-box !important;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • mikobee

    Hi Ash:

    I am not a coder, so I don't really know what I'm doing. I put the following code in using the My Custom CSS plugin:

    .wdpu-image img {
    height: auto !important;
    width: 100% !important;
    display: absolute;
    padding: 20px 40px;
    }
    .wdpu-buttons {
    box-sizing: content-box !important;
    }

    I'm trying to get the images centered, without stretching.
    I put in the padding to get the 7-Day popup centered, but it is not working.

    The webinar image in the other popup will not center no matter what I do.

    I'm sure you can fix this pretty easily!

    Two questions:
    1) What is the ideal image size for Popup Pro?
    2) Should I be putting the CSS in the Custom CSS section of each popup, for more control?

    Thanks,
    Michael

  • Ash

    Hello @mikobee

    I hope you are well today.

    1) What is the ideal image size for Popup Pro?

    There is no standard site of the image in popup, it depends on the length of content.

    2) Should I be putting the CSS in the Custom CSS section of each popup, for more control?

    If you css is a popup specific, you can enter css in popup control. But for global css, add it in my custom css plugin. For example, the following css is meant to be global:

    .wdpu-image img {
        height: auto !important;
        width: 100% !important;
    }
    .wdpu-buttons {
    box-sizing: content-box !important;
    }

    But the padding you set is different for each popup, in this case you can use popup specific css.

    You can use the following css in the popup specific css box in question:

    .wdpu-image img {
        padding: 150px 40px;
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash