Custom CSS examples for Mailchimp

Mailchimp custom CSS is sometimes needed.

Featured Images In RSS will prepend the featured image to the RSS feed summary. It allows Mailchimp merge tags to add images to RSS emails. 

Custom CSS is not always required when using Mailchimp merge tags. There are size, alignment and padding options in the standard and Premium plugin. 

The size settings from the plugin will show in Mailchimp when just using the merge tag. 

Mailchimp strips out the plugin's in-line CSS because it requires CSS of its own. The alignment and padding plugin settings will require Mailchimp specific CSS to be added to the email template. 

Read: Mailchimp merge tag methods

Custom CSS within Mailchimp is also used to fix other email display issues (see Outlook CSS example). 

If you are using the Premium plugin, we do include support to code Mailchimp CSS so it works as you desire.

CSS Example: Set fullwidth image

You would paste it into the RSS merge tag body Text Block, click on it's Code <> icon, and paste it at the very top of the HTML code.

This example sets the width of images to match Mailchimp's 600px wide content column, sets the max-width to 100% for mobile displays that are less than 600px wide so images are made smaller, with a 35px margin on the bottom of the image and above the post text (and includes Outlook-specific CSS as well, for maximum compatibility):

<style type="text/css">
.mcRssImage {
width: 600px !important;
max-width: 100% !important;
margin-bottom: 35px;
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
.mcRssImage {
width: 600px !important;
max-width: 100% !important;
margin-bottom: 35px;
}
</style>
<![endif]-->

Mailchimp templates often have different CSS class names, so for example, this "mcnTextContent" class name version may be the CSS you need to use:

<style>
.mcnTextContent img {
width: 600px !important;
max-width: 100% !important;
margin-bottom: 35px;
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
.mcnTextContent img {
width: 600px !important;
max-width: 100% !important;
margin-bottom: 35px;
}
</style>
<![endif]-->

CSS Example: 250 pixels wide left alignment

This CSS combines both of the above CSS class names, and would make the image 250px wide, left aligned, with a 20px margin between the image and text:

<style>
.mcRssImage, .mcnTextContent img {
width: 250px;
float: left;
margin-right: 20px;
} 
</style>
<!--[if gte mso 9]>
<style>
.mcRssImage, .mcnTextContent img {
width: 250px;
float: left;
margin-right: 20px;
} 
</style>
<![endif]-->

You can change the CSS width size, alignment (left, right, none), and margin size as you like.

There's also an email client CSS guide that might be helpful:
https://www.campaignmonitor.com/css/

Here are other links we've found that have helpful Mailchimp CSS info:
https://woorkup.com/fix-max-width-images-in-mailchimp-rss-to-email-campaign/
https://artshacker.com/make-mailchimp-images-behave/

For more precise and flexible design options, you will want to use the Premium media tag option, and then style the media tag image, and remove the standard description image that is prepended using the Only Media Tag Image option. This allows you to have the image separate from the body copy, placing it above or below the title, etc. It can require more advanced custom CSS - with Premium support, our experts can help code your custom CSS once we see the HTML the template is generating.