Pop-up close button appears out of the screen

Resolved Efs
(@stevendigital)

2 years, 11 months ago

Hello

I have a problem with the pop-up on mobile devices. Link is here

Settings:
Display: Left bottom notice
Position: I have checked the fixed position.
Disable Overlay: Checked.
POP-COOKIE SETTINGS: The pop-up appears once a day. So clear your cookies in order to make it appear again.

In most desktop devices everything appears correctly. But on mobile devices (especially on widths like 320px and up to 580px) the pop-up appears taller than the viewport.

So I try to figure out how I can keep the settings above but also make the pop-up appear correctly. Also, I want the pop-up content to be scrollable.

I have checked these sources:
a) https://docs.wppopupmaker.com/article/278-why-is-my-popup-not-scrolling-properly-background-scrolling
b) https://docs.wppopupmaker.com/article/314-why-does-my-site-shift-jump-or-skip-when-a-popup-is-triggered

But nothing worked for me. I also noticed that some CSS on the articles above contain the overlay, so I also changed the class to .pum-overlay-disabled as per my needs.
Still, nothing changed. The pop-up remains fixed but the content is not scrollable.

So any thoughts that this can work?

Best Regards

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Support mark l chaves
(@mlchaves)

2 years, 11 months ago
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!
Thread Starter Efs
(@stevendigital)

2 years, 11 months ago

@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
Plugin Support mark l chaves
(@mlchaves)

2 years, 11 months ago
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!
Thread Starter Efs
(@stevendigital)

2 years, 11 months ago
@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 2 years, 11 months ago by Efs.
Bel
(@belimperial)

2 years, 11 months ago
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/
Thread Starter Efs
(@stevendigital)

2 years, 11 months ago

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

Plugin Support mark l chaves
(@mlchaves)

2 years, 11 months ago

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 🙂

Thread Starter Efs
(@stevendigital)

2 years, 11 months ago

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

Plugin Support mark l chaves
(@mlchaves)

2 years, 11 months ago

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