Mailchimp Custom CSS

Often Mailchimp strips out the plugin's in-line CSS, and requires CSS of it's own to affect the images it adds to the template.

Here is example CSS to add to the body of the template HTML that sets the width of images to match Mailchimp's 600px wide content column, sets the max-width to 100% for displays that are less than 600px wide, with a 35px margin on the bottom of the image and above the post text:

<style>
.mc-rss-item-img {
	width: 600px;
 	max-width: 100%;
 	margin-bottom: 35px;
}
</style>

Or, this may be the class name you need to use, we've seen this in more use recently:

<style>
.mcnTextContent img {
	width: 600px;
	max-width: 100%;
	margin-bottom: 35px;
}
</style>

Change the CSS size, width, and margins as you like.

The template's CSS class or ID name may need to be modified, based on the various templates or elements you're adding the CSS to.

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 precise control, often the solution is to use the Premium option of Media tags and then style the image separately from the description image that is prepended, so you can have images separated out from the content, but that requires custom CSS as well. With premium support we can help create the custom CSS needed once we see the HTML the service is generating.

Q: I want my newsletter emails to display each post with a featured image and "read more" below it. How can I set this up? 

A: In WordPress, be sure the Settings > Reading option for RSS is set to Summary. Your feed should then output just the summary with a Read More link. That's separate from what our plugin does. The Read More could also be added within the Mailchimp template itself, as a link back to the post's URL using *|FEEDITEM:URL|*. I think this is usually included in the default RSS templates.

Perhaps review this good Mailchimp RSS campaign tutorial post:
http://www.blogging4keeps.com/mailchimp-rss-campaign/

Our plugin should prepend the featured image to the RSS feed summary, and basically if it's doing that, you're all set.

To refine the image further, resize or align it, requires custom CSS within Mailchimp. If you have the premium version of the plugin, we do include support with Mailchimp CSS and can even custom code CSS for you so it works as you desire.

Still need help? Contact Us Contact Us