One of my clients asked me to design a MailChimp newsletter template for them. Newsletter templates can be a pain as there are literally dozens of email clients, providers, browsers, and platforms that the newsletter needs to work with. Not to mention that many of these don’t support web design techniques that commonly work in regular browsers. Preparing and testing a newsletter template can easily make you feel like you’re back in the 90’s.

But I digress. Back to MailChimp. All was going well and the template was displaying properly during my tests—except in Gmail.

Gmail commonly adds extra gap under every image in the newsletter. It’s basically an extra 3px padding. Usually, there is an easy fix for this—just add display: block; to the image style. But for some reason this fix wasn’t working in this case.

After some digging I found out that Gmail strips out inline CSS (if it doesn’t like it). This made me have a closer look at the inner workings of MailChimp. MailChimp is great in the sense that it automatically converts the template CSS into inline styles. It saves you a lot of work as a developer.

However, if your newsletter uses editable images make sure that you specifically set the border width and color when uploading the image via MailChimp. If you don’t, and this is the crux of the problem, the inline image style that MailChimp will produce in your newsletter will look like this border: px none;. Which is precisely what Gmail doesn’t like and thus strips out any surrounding styling, including the above display: block; fix.

Set the image border width to 0px and color to transparent in MailChimp and you’re golden. Gmail won’t mind your CSS anymore and the usual fix to get rid of the gaps/padding will work.

Enjoyed this post? Share it with others.

Email

Facebook

Google

Twitter