Popup Blocking Site on Mobile Devices

Hello @studio544

Hope you are doing well!

If a popup created with Custom Content, would you please make sure that the “Use custom size (if selected, Pop-up won’t be responsive)” option is unchecked

If the issue still persists, we can share here the CSS code to show the “X” button. Please enable the pop-up to be shown on mobile devices and share a link to your page.

Please advice,

Cheers,
Nastia

Hello Nastia,

Thank you for your quick response. No, the popup was not created using your Custom Content option, just the regular Email Opt-ins feature. We have it connected to our Mail Chimp list.

We still don’t have it enabled for mobile devices as we don’t want it to block people from navigating the site. The URL is https://flexnutrtition.net.

Sorry for the typo! The URL is https://flexnutrition.net/.

Hello @studio544

I trust all is well!

Please try the following CSS code. Add it to Appearance > Customizer > Additional CSS:

@media (max-width: 750px) {
.inc_optin a.inc-opt-close-btn {
    margin-top: 60px;
}

In case the close button is still too far at the top, please change 60px to a higher number.

If the CSS code will not work, please temporary enable the popup for mobile devices and let us know, so we could provide you right CSS.

Kind regards,
Nastia

Hello,

I have tried adding the CSS as you suggested but it did not fix the issue. Even increasing the margin-top to 200px, made no difference. For now, I have left the popup active on mobile devices so you can see for yourself how it displays but I can not leave it long since many of our site visitors come from mobile devices. Thank you.

Hello @studio544

I hope you are doing well!

I could replicate the issue from our end, on older mobile phones, like iPhone5 and iPhone 4. I’ve informed our developers about it.

Please try the following CSS code, by replacng the CSS code I’ve provided above:

@media (max-width: 750px) {
.wpoi-animate {
    top: 60% !important;
}
.wpoi-element.wpoi-aside-x.wpoi-form.wpoi-align {
	max-height:200px;
}
}

Please clear the Browser Cache to see the changes. If the issue still persists, please add additional CSS below. It will hide the image for mobile devices

@media (max-width: 750px) {
.wpoi-element.wpoi-image.wpoi-image-fill {
	    display: none;
}
}

Let me know how it went!

Kind regards,
Nastia

Nastia,

The new CSS code did not work. Even the second snippet to hide from mobile devices did not hide the popup. I have turned off the popup completely for now in the display condition settings on all mobile devices until your team has the issue resolved. Thank you.

Nastia,

I also noticed that even though I clearly have the Opt-In Display Conditions set to only display the popup on the Home page of the site, it is popping up on all pages of the site. It’s interesting because the option to not display it on mobile devices is working correctly so I’m not sure why the other is not? Any suggestions?

Hello @studio544,

Can you make a screenshot of that part of settings

from your site?
That part shows actually where popup shows, it should be similar to: No pages, No posts, On specific URL (if you use that for displaying on home page), No tags, No categories.

kind regards,
Kasia

Kasia,

Here is a screenshot of the settings.

image link

Hello @studio544,

To display popup only on home page your settings need to look like that:

right now from your settings screen you only display on one page, but on all posts and tags and category archives.

kind regards,
Kasia

OK, it seems to be working now. I also had to restrict it on the Products pages to prevent it from popping up in the online store. Thank you!