Responsive design automatically adjusts the layout and style of your campaign for optimal viewing on any device. However, smaller screens and the various ways that different devices and applications handle responsive code can lead to unexpected behavior.
In this article, you’ll find information on common behavior that you might see when your MailChimp campaign is viewed on a mobile device.
My campaign layout changes.
Content blocks arrange in mobile to read left to right, top to bottom by section in the layout. For example, with a 1:2:1 Column template, the top body content would appear above the left-column content, followed by the right-column content, and finally the bottom body content.
If you want your campaign content to display in the same order regardless of the device on which it is viewed, use a single-column template.
I want my campaign to look like the desktop version.
MailChimp’s drag-and-drop templates are designed to be mobile responsive, so your subscribers can easily view your campaigns on any device. In many cases, non-responsive email layouts require subscribers on mobile devices to zoom in or scroll horizontally to read content.
If you want a template that is not mobile responsive, or want more control over certain template elements, you may want to use a custom-coded template.
I want to change the font size on my responsive campaign.
The default mobile style settings for MailChimp’s drag-and-drop templates are based on our recommendations for optimal mobile viewing. You can change some settings, like the font size, in the Mobile Styles section of the Campaign Builder.
My images stretch when viewed on mobile.
Our responsive templates will not constrain images that are not in an Image, Image Group, Image Card, or Image + Caption content block. Large images that are added to a text block may stretch your layout when viewed on mobile.
There are blue links in my campaign.
Some mobile devices, especially iPhones and iPads, automatically create blue links for any addresses, dates, or phone numbers when your campaign is viewed on the device. This is a function of the device’s operating system that allows recipients to add the linked information to the device's calendar or address book. Because the link styling is handled by the device, it is not something that we can control within MailChimp.
To change the appearance of the linked text, you will need to reach out to a web developer to edit the campaign's HTML.
My date or phone number has disappeared.
Some mobile devices create clickable links from dates and phone numbers in your campaigns, so readers can easily add the event or number to their device’s calendar or address book.
This becomes a problem if the link color for your campaign is the same color as your campaign background color. In this case, when a mobile device converts dates or phone numbers in your campaign to links, they disappear against your campaign background.
Because the link styling is handled by the device, it’s not something we can control within MailChimp. However, you can change the link styles for sections in your campaign so they are not the same color as your campaign background.
MailChimp templates include media queries to define how the campaign should display on a mobile device. However, devices and applications can each treat media queries differently, so your campaign may behave differently across various devices.
Below are the more common devices and applications that do not support media queries.
- Gmail Android app (POP/IMAP account)
- Android Yahoo Mail App
- BlackBerry OS 5
- iPhone Yahoo Mail App
- Samsung Galaxy S3+
- Windows Mobile 6.1
- Windows Phone 7
- Windows Phone 8
My anchor links don’t work.
If you have anchor links in your campaign, like for a table of contents, the links may not work how you expect. For example, iPhones require you to tap an anchor link twice before you jump to that section. Devices with iOS 9 or later do not support anchor links. Campaign Monitor provides a helpful chart on how different clients and devices handle anchor links.