MailChimp column spacing woes

A client was having issues with their columns being out of whack. And CSS wasn’t helping.

Turns out the issue was hidden non-breaking spaces in the copy of the email.

Occasionally strange invisible characters can hide in your content on applications like WordPress or MailChimp. Especially if you cut and paste from Word or some other source that might use a different encoding. It’s always good to check the “HTML View” or “Code View” depending on what app you are using.

The problem

3 columns of text with thumbnails at the top. The middle is wider than the other two.

In the MailChimp editor the sample text appeared fine. It was only on the actual campaign that the columns got wonky.

The Fix

In the MailChimp campaign editor, you can click on the content edit button, and then on the code icon.

Edit the content
Click the code icon

There you will see the offenders.  . These all need to be replaced with normal spaces in order for the lines to break normally and follow the column layout.

Once those were removed the columns looked ok again.

The Test

But since email clients all choose to display things differently, make sure you always check your campaign on Windows and Mac. And use different clients like Gmail in Safari and Chrome. And same with Outlook. There was another issue with this template where the bullets had extra padding, but only on Gmail in Windows 11 Chrome and Safari on Mac.

Choose what to test for based on your previous campaign data. If most users are on Outlook, make sure to add that to your test plan. But balance that with your budget and staff. It makes no sense to test on Netscape Navigator in Windows 95… unless you are sending a blast to your Pentium I enthusiasts group.

Test on ALLLLL platforms