Mailpoet Mobile Popup Position
-
My Mailpoet Newsletter popup is inhibiting visitors from seeing the site, as the x to close it is off the page. I’ve searched Google extensively, Mailpoet’s own forum seems to be closed, and CSS that I’ve found isn’t working. Help gratefully appreciated, as I upgraded to Business on WP to leverage this specific plugin.
The blog I need help with is: (visible only to logged in users)
-
Hey there,
Happy to help you with this.
We can certainly take a look and advise which CSS is needed here.
When I visit sundayslicers.com – I can’t see the MailPoet popup running on the site, are you able to direct me to where you’re seeing this please?
We’ll take a closer look and see what we can do.
Many thanks in advance and speak soon!
-
Hello!
Thanks a lot for offering the help!
Ah, well you’ve helped me identify another issue – it isn’t working when I select Pop-up form placement. Have switched back to Slide-in and it’s working again, so if you can try again please?
Regards
Scott
-
Hello!
I wanted to let you know that the slide-in option does work, but it doesn’t happen instantly.
. Here’s the important thing to remember: The pop-up is loaded in your site’s footer template, which means that in terms of code, everything else on your site needs to be fully loaded before the pop-up can appear. That’s why you don’t see it loading immediately. If you wait patiently, it will eventually slide in as you expected.
I hope this explanation clears things up for you!
-
Thanks, but I know the slider works, and I deliberately set the 15 second delay. The issue is that it doesn’t show the cross to close it on mobile, and that it doesn’t work at all on any device if I choose a pop-up instead of a slider.
-
Me again! I misread your response in thinking the slide-in option wasn’t working. Sorry about that! :)
Could you switch it to use the pop-up option so we can take a closer look? Thank you!
-
No worries. I could do, but my main concern is that anyone viewing on a mobile has half of the screen blocked since they can’t close the MailPoet box. The popup is much less important, as I can launch with the slider. I’d hate to inhibit CSS help by removing the ability to see the issue…
-
Thank you for providing clarification. Troubleshooting without observing the problem directly can be challenging. It’s possible that the size of the element is too large for mobile optimizations, causing issues with the pop-up? However, if the slider works fine for your website, it might be a good idea to utilize it for now and we’ll monitor if others report the same issue.
Please don’t hesitate to reach out if you have any questions or require assistance with anything else. We’re here to help!
-
So, helper 1 found a new problem, but agreed to provide specific help.
Helper 2 solved a problem that didn’t exist.
Helper 3 then looks to close down the request.
Why can’t you observe the problem? It should only be a case of looking at the site on a mobile phone.
I don’t want to just live with >50% of people not being able to view my site properly. As above, I’m paying for a Business subscription so I can have a newsletter.
Please can I request some ownership of the issue… ideally helper 1 who was offering practical help?
-
Hi there,
We are expert in helping with general WordPress issues, but we do not have specific support knowledge for 3rd party plugins and themes. We’re able to take a look, but we are not a substitute for direct support from the creator of your plugin or theme in most cases.
I am however able to see your issue however, and it appears it is related to the fact that the mobile styles for the N7 Golf Club theme are interfering with the styles that are included in the Mailchimp plugin, and help dictate the size of popups and sliders.
This is noted in Mailchimp documentation here as a common issue: https://kb.mailpoet.com/article/363-how-to-create-a-pop-up-slider-form#popup-doesnt-work
Based on my tests, the following CSS (added to your custom CSS settings) will reduce the width of the mobile slider, so that the ‘x’ icon is visible to dismiss.
@media (max-width: 500px) { #mp_form_slide_in1 { width: 65%; min-width: 65%; } }If you wish, you can experiment with the width value (make it 50% or 75% as you wish) as long as you make sure that both lines of code use the same width value.
Hope that helps. Please let us know if you have any more questions.
-
Hi there staff-totoro and thanks for trying to help.
I appreciate it’s a 3rd party plugin, but Mailpoet seemed to be positioned as a somewhat ‘official’ option, being native to WP and part of WooCommerce that is seemingly a partner. It was frustrating to therefore find that free subscribers are pointed to a forum that’s seemingly non-existent, and I’d been given optimism from the first helper that support would be provided.
I’ve tried that CSS, and many variants of it, and it makes no difference whatsoever. I’m pasting this in Appearance / Customize / Additional CSS, right?
Even this does nothing…
@media (max-width: 200px) {
#mp_form_slide_in1 {
width: 20%;
min-width: 20%;
}
}This is the final step before my (overdue) launch, hence my eagerness to get it resolved… so any help massively appreciated.
-
To update, I’ve also tried the CSS and variations of it in the Mailpoet Custom CSS, and no change. I’ve even tried resizing and deleting the image, but still the same.
Is there a way to disable it on mobiles, as a possible workaround?
-
Hey there!
Thanks for reaching back out!
I think the full CSS, you need is:
@media (max-width: 500px) { #mp_form_slide_in1 { top: 200px; width: 80%; min-width: 0px margin: 0 auto; max-height: 53%; } .mailpoet_form_popup_overlay { height: auto; } }And this should result in something like this:
To check, is this what you had in mind on a mobile device? (i.e. not blocking the page, and your audience can close the pop-up on a mobile?)
I’ve tried that CSS, and many variants of it, and it makes no difference whatsoever.
I think the CSS you’ve added in a different part of the site is overwriting any changes being made, can you direct me to where you’ve added CSS please? It may be worth placing this one place to help keep things tidy.
To check, is this the CSS you’ve added:
@media (max-width: 500px) #mp_form_slide_in1 { background: #ffffff; animation: none; border: none; border-radius: 0; bottom: 0; left: 0; max-height: 40%; padding: 20px; right: 0; top: auto; transform: none; width: 100%; min-width: 100%; }The reason why I ask is because it looks like this is the CSS that’s overwriting any other.
Many thanks in advance, I hope we’re making progress here. :)
-
Thanks so much aleone89!
Yes, I’d be delighted with that on mobiles… though I thought it automatically dropped the image? In any case, I just want it looking something like that on laptops (popup ideally, slide-in otherwise), and to work on mobiles without stopping people being able to see the site properly.
Before I paste in that new CSS code, and delete from the other place, can you confirm if the code should be sat in the overall Custom CSS field (via Appearance / Customize) OR the Custom CSS section of the Mailpoet plugin attributes?
-
Update: whilst waiting, I tried it both ways, deleting it on the other side, and neither works. It does move the popup to the middle of the screen, which is worse as it is, but would be cool if you could close it down.
Any ideas very welcome. I can’t launch a website that people on 50% of devices used can’t view.
-
Hey there,
Glad to see we’re making progress here.
Yes, I’d be delighted with that on mobiles… though I thought it automatically dropped the image?
It does eventually drop the image, but this happens at smaller screensizes, less than 500px in width.
In any case, I just want it looking something like that on laptops (popup ideally, slide-in otherwise)
This would related the previous setting mentioned, so not the sliding in setting.
Speaking frankly… I actually think the slide in right on a laptop works better, because you’ve got images of some awesome golf courses there…(I’m hoping that’s a useful point to make :). )
Before I paste in that new CSS code, and delete from the other place, can you confirm if the code should be sat in the overall Custom CSS field (via Appearance / Customize) OR the Custom CSS section of the Mailpoet plugin attributes?
It should work in both, but the point here is that the CSS is one place, whichever you choose.
Personally, I use Appearance > Customize > Additional CSS, because this is a standard location and reliant on a plugin.
Any ideas very welcome. I can’t launch a website that people on 50% of devices used can’t view.
It looks like this code here, is the problem:
Where has this been added?
We’re nearly there! :)
-
Thanks so much aleone89 – your positive feedback on the site, patience and support is truly appreciated! I’m totally cool with the slide-in – just thought the popup ‘popped’ a bit more!
It’s hard to see that image (can’t seem to open so had to zoom browser), but it looks like some Custom CSS in the Mailpoet plugin. I didn’t add this. There’s no code in the main Customizer.
Shall I edit / delete this code?…
-
Hey there,
No problem! Glad it’s proving useful.
Yes, so editing the min-width: to,
min-width: 0px;as seen in the screenshot screenshot should fix that.The CSS in it’s entirety should look like:
@media (max-width: 500px) { #mp_form_slide_in1 { top: 200px; width: 80%; min-width: 0px margin: 0 auto; max-height: 53%; } .mailpoet_form_popup_overlay { height: auto; } }Shall I edit / delete this code?…
Where are you editing that out of curiosity? I don’t see that in Appearance > Customizer > Additional CSS.
Glad to see this is all working out. :)
-
Hi,
So, the code you’ve said should fix it, is the code it has currently? Then why isn’t it working?! I’ve also tried changing all of those values and it makes no odds.
I’m looking at the code in the Mailpoet section. There’s nothing in the main Customizer.
Love your enthusiasm for it ‘all working out’, and am genuinely so grateful for your attention… but we haven’t actually managed to fix the issue one bit yet! :)
-
Hey there,
So, the code you’ve said should fix it, is the code it has currently? Then why isn’t it working?! I’ve also tried changing all of those values and it makes no odds.
I’m looking at the code in the Mailpoet section. There’s nothing in the main Customizer.
I need to see where you’ve added this CSS… I’ve looked at the Mailpoet settings and I can’t see a custom CSS section in there.
Are you able to talk me through where you’re editing that place.
It’s not working because this code, is still at play, and we need to remove and/or double check it’s not there, so that we can overwrite it via Customize > Additional CSS
The (index) suggests this is custom CSS somewhere in the site.
- The topic ‘Mailpoet Mobile Popup Position’ is closed to new replies.
WordPress.com Forums 