Adding custom CSS to your website

While it's not possible to change the CSS of the newsletters sent with MailPoet, you can add custom CSS styles to your website in order to modify the style of a subscription form, for example.

For that, we recommend adding the custom CSS to  WordPress Admin > Appearance > Customize > Additional CSS. This CSS editor can apply CSS to any or all portions of your website.

Examples of CSS to edit MailPoet forms

The pop-up form width is larger than the screen on mobile

The  @media rule is used in media queries to apply different styles for different media types/devices. It usually refers to the device's max and/or min-width as a condition to apply this rule.

Using this rule, we can specify a smaller width percentage for mobile devices:

@media (max-width: 500px) { 
#mp_form_popup1 {
width: 90%; 
min-width: 90%; 
} 
}

If it doesn’t work, try adding  !important to it:

@media (max-width: 500px) { 
#mp_form_popup1 { 
width: 90% !important; 
min-width: 90% !important; 
} 
}

Editing the placement of the pop-up form on mobile

The currently max-height for the pop-up form on mobile is 40%. You can change it (i.e., to 60%) by adding this CSS code:

@media (max-width: 500px) {
#mp_form_popup1 {
max-height: 60%; 
}
}

Editing the pop-up close button

Depending on your theme's CSS, sometimes the close button for the pop-up form may not be displayed or can be displayed bigger or smaller than it should.

If the close button is not being displayed at all, you can try to fix it by adding this CSS:

.mailpoet_form_close_icon {
padding: 0 !important;
}

If the problem is its size:

.mailpoet_form_close_icon {
height: 20px;
width: 20px;
}

Below Pages form centered on your page, you can use this CSS code.

#mp_form_below_posts1 {
width: 340px; 
margin: auto; 
}
	

Note: the number in #mp_form_below_posts 1 depends on the form ID.

---

Displaying pop-up form images on mobile

@media screen and (max-width: 499px) {
.mailpoet_form_image {
display: block;
}
}