Pop-up close button appears out of the screen

Hi @stevendigital,

Thanks for all the helpful background info.

Here’s one custom CSS option that seemed to work on your site.

@media (max-width: 1023px) {
    #popmake-21766 {
        top: 3% !important;
        overflow-y: scroll !important;
        height: 90vh;
    }
}

Tweak any of those values as needed. Instructions for adding CSS to WordPress.

Let me know how that goes ??

Thanks!

@mlchaves

Thank you for your response.
With some tweaks on the CSS that you provided, I got the desired position and the content is now scrollable.

Also another question

Can I change the position of the content, so that when the pop-up loads it can have a position of top-center?
I know that this can be down from the “Position” menu inside the pop-up options but I want this to be applied only to mobile devices.

Best Regards

Hello @stevendigital,

Great. Glad that worked for you.

I’m not exactly sure what you’re asking about having the popup’s content top-centre for mobile.

Do you mean something like this?

@media (max-width: 1023px) {
    #popmake-21766 .popup-title {
        text-align: center;
    }

    #popmake-21766 .popup-title img {
        margin-left: 50%;
        transform: translate(-50%,0);
    }

    #popmake-21766 .popup-parag {
        text-align: center;
    }

    #popmake-21766 .pum-content.popmake-content {
        text-align: center;
    }
}

Result https://share.getcloudapp.com/mXupXZ2g

Please let me know.

Thanks!

@mlchaves

You are right.
Let me explain it a bit better.

Now when the pop-up loads I have it in the state of Image A.

What I try to achieve is that when the page/pop-up loads I want it to appear in the state of Image B.

Let me know if you need anything else.

Best Regards

• This reply was modified 3 years, 6 months ago by Efs.

Hello @stevendigital

Thank you for your reply and for providing us screenshot examples.

To achieve Image B, you may need to adjust media queries for the 767 pixels height value.
Please see this sample:

@media screen and (max-width: 767px) {
    #popmake-21766, #popmake-157854 {
        top: 1% !important;
        overflow-y: scroll !important;
        height: 68vh;
    }
}

Here is a sample output: https://share.getcloudapp.com/wbuwg2Ay

Kindly search your code and update the height to a smaller value until you reach your desired output.

I hope that helps. If this helps resolved the issue, please could you take a moment to rate and review the plugin.
If you still need help please message us directly at https://wppopupmaker.com/support/

Hello @belimperial
Thank you for your reply.

I have tried what you suggest above, but this only works in the Google console.

If I change the height to a lower value it will only make the pop-up smaller. But the content will remain there.

So is there any other workaround for that?

Best regards

Hi @stevendigital,

Those screen captures helped a lot.

That’s an interesting edge case. I was able to reproduce it, but only on my browser dev tools. I don’t see this happening when I bring up your site on my iPhone.

Anyway, if you see this happening on your phones, here’s one way to fix it. Warning, you’ll notice there’s a bit of trickery going on in the code.

Code: https://gist.github.com/marklchaves/c9ec7d69e946fa3c9a3fcf3c3d886ca1

Result: https://share.getcloudapp.com/7KuP9R0N

Shout if you have any questions ??

Hello @mlchaves

It worked perfectly.

At first, the js was not working and I noticed that it was missing one semicolon in the end of console.log(popElt.scrollTop = ${popElt.scrollTop});

Thank you for all your help and the time you spent on the matter.

Best Regards

Hello @stevendigital,

Excellent. We’re glad that it’s working now ??

OK about the missing semicolon. Semicolons are totally optional in JavaScript unless you’re running in strict mode. But, I added a ; to that line of code in the gist.

Have a great weekend!

Mark