[Support request] Mailpoet form doesn’t show properly on mobile

[Citygemeinde Hafen-Konkordien]

Hi Guys,

while trying to set up a opt-in form for MailPoet there’s an error, that doesn’t seem occur to the team of mailpoet. So I guess it’s somehow connected to generatepress.

On Desktop the form is working fine, but on mobile it doesn’t show properly, as the background image disappears and the box goes further over the right border of the screen.

Here’s the site: https://ankerstelle.net/
The form is set so appear after 15sec

Hope to find a solution with you!

[David]

Hi there,

the mailpoet CSS is setting the elements width and adding padding, but they haven’t set it to box-sizing: border-box;

You can add this CSS to fix that and stop it from overflowing:

.mailpoet_form_popup {
    box-sizing: border-box;
}

Note: there CSS is also removing the background image from the form on smaller screens ( max-width: 500px).

Note: GP 3.0 with the Customizer > General > Structure set to Flexbox will automatically apply border-box to the content elements.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts