[PopUp Pro] How to remove horizontal scroll bar appearing in pop up pro?

I have a question about a pop up appearing on the home page of my site, nicholaswilton.com. I've integrated pop up pro with a form I created in infusionsoft.

When the pop up appears in on my homepage, there is a horizontal scroll bar that appears at the bottom of the pop up. Is there a way to remove this scroll bar? When I view the pop up from my desktop computer, the scroll bar does virtually nothing - it scrolls the pop up from left to right a minuscule amount and does not reveal anything that was previously hidden in the margins.

Also, when it comes to looking at this pop up from my phone, I have to scroll across to see everything - it is possible to customize the pop up for a phone such that the person can see the pop up in its entirety without having to scroll?

Thirdly, the pop up also displays on a phone in such a manner as to make closing it difficult - are there any suggestions as to how this issue may be solved?

I realize the last two issues with the pop up displaying on the phone are better answered once looked at, so to see what I am referring to just go to nicholaswilton.com on your phone and then wait 5 seconds for the pop up to appear.

I thank you in advance for any help you can offer on this front. I truly appreciate it.

  • Rupok

    Hi Nicholas,

    When the pop up appears in on my homepage, there is a horizontal scroll bar that appears at the bottom of the pop up. Is there a way to remove this scroll bar?

    Please try the following custom CSS to fix the horizontal scrollbar issue in both Desktop and Mobile view:

    .wdpu-4234 .wdpu-content {
        overflow-x: hidden;
    }
    @media screen and (max-width: 480px) {
    .wdpu-4234 .wdpu-text {
        padding: 5px !important;
    }
    .wdpu-4234 table {
        table-layout: auto;
        width: 100%;
    }
    }

    it is possible to customize the pop up for a phone such that the person can see the pop up in its entirety without having to scroll?

    You have a big form in that popup. The best way will be hiding the image from mobile. That will make the whole form visible in mobile screen and your users won't have to scroll to see the full form content. To hide that image from mobile screens, please try the following custom CSS code:

    @media screen and (max-width: 480px) {
    .wdpu-4234 .wdpu-image {
        display: none !important;
    }
    }

    Thirdly, the pop up also displays on a phone in such a manner as to make closing it difficult - are there any suggestions as to how this issue may be solved?

    The following custom CSS should add more padding around the form in mobile screens. That should make the closing much easier I believe.

    @media screen and (max-width: 480px) {
    .wdpu-4234 {
        padding: 20px;
    }
    }

    You can add these to a theme's stylesheet, in a Child Theme [http://codex.wordpress.org/Child_Themes], using a plugin like Simple Custom CSS [https://wordpress.org/plugins/simple-custom-css/] or you can simply paste these in your Dashboard > Appearance > Customize > Additional CSS section.

    Please let us know if any of these doesn't work or if I missed anything. We will be very glad to help further.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.