Mailpoet Pop-Up Form Display Issue on Page Load

Hi there @noel4nopun,

Taking a look at your site, I see your pop-up form, and I see that the styling changes when resizing the window a bit (like you described), however the issue itself seems a bit different from your description, so I’m wondering if you may have already edited the form further after posting here.

As shown in my GIF below, I see the following:

• When the pop-up first loads, I see that you have your image+text at the top and the form fields at the bottom. Checking the source, I see that there are two columns that are being stacked because the “stack on mobile” style is being applied
• After re-sizing the window a bit though, I see the style is removed and displays in the expected two columns

Link to image: https://d.pr/i/yBeeaF

Testing on my personal site with a two-column form, however, I was unable to reproduce the issue — the form loads as expected, and adjusts normally when resizing the browser.

As a first step, to rule out a conflict with other code running and causing styles to be applied incorrectly, please try testing with the default Twenty Twenty theme and only MailPoet active. To avoid affecting the live site, you could do this on a test/staging site. If you don’t have one already, your hosting company might offer one as part of your package. Alternatively, you can use a free plugin like WP Staging for quickly creating a new test site.

Please let us know how that goes!

Thank you for your help. I’ve set up a staging site where the issue wasn’t present with the Twenty Twenty theme. It’s worth noting that during this test, the only active plugins were MailPoet, WP-Staging, and WooCommerce. However, when I reactivate my original theme, the problem comes back. This suggests that the issue is likely tied to a mobile-specific setting in my original theme, but I’m uncertain about how to correct this. Any suggestions on preventing this setting from impacting the display would be very helpful.

Hi there @noel4nopun,

Thanks for the reply, and for your thorough troubleshooting, which does indeed hint at your theme being at some part the cause of the issues with the pop-up.

I can see that since our last reply that your pop-up has been updated to be more mobile-based, even on desktop:

Full Size: https://d.pr/i/bv0a0Z

On mobile, this is rendering nicely as a small banner on the bottom of the screen:

Full Size: https://d.pr/i/nryKU8

As this is working with the Twenty Twenty theme, the best course of action will be to check in with the team at https://shop.destacaimagen.com to see if they can replicate the issue, or check if the issue is still present when using Divi without any customizations.

Thank you for the follow-up. My custom css is now no longer available in my Theme customizing which has me troubleshooting more than I thought. Meanwhile, yes changing to a mobile-friendly version even on the desktop, was the safer solution, although I would’ve preferred the side by side. But being I could see no place to prevent the mobile version from showing on the desktop, I abandoned the concept.

You’re very much welcome @noel4nopun

But being I could see no place to prevent the mobile version from showing on the desktop, I abandoned the concept.

Sure noted, let me know if you have any other questions at all.