Adding mobile-specific styles to a custom MailChimp email template

MailChimp‘s “code your own” custom email template doesn’t, by default, make any provisions for mobile-specific styles. As a result the email text is usually too small to read on a mobile device without the user manually zooming in.

Conveniently, MailChimp’s css processor does support the max-width conditional. Put this at the end of your declared styles in the head of your custom email template (using the standard mobile width of 480px), then add whatever mobile-specific overwrite styles you need to improve legibility:

@media only screen and (max-width: 480px) {
    /* mobile-specific overwrite styles go here */
}

Notes

  • Be sure to add the !important flag to any overwrite styles.
  • If you’ve declared a default line-height, don’t forget to update that for mobile as well.
  • MailChimp’s css processor supports the use of class and ID references, which makes style application a lot easier.