Mailchimp's campaign templates use responsive design to adjust the layout of your campaign to look great on any device. But, not every device handles responsive code the same way, which can make your campaign look a little different on mobile than in a web browser.
In this article, you'll find out how we display campaigns on mobile and how to troubleshoot some issues you might run into.
Things to Know
Here are some things to know about troubleshooting campaign behavior on mobile devices.
- We use media queries to find out the capability of a device, and optimize the campaign for it. If something looks off, that device might not support media queries, and you may need to develop a custom template.
- These apps and devices don't support media queries: Android Yahoo Mail App, Blackberry OS 5, Samsung Galaxy S3+, Windows Mobile 6.1, Windows Phone 7 and 8.
- Before you send a campaign, we recommend that you preview and test your campaign. Our Inbox Preview tool shows you how your campaign will appear on a variety of mobile devices.
- You can also preview your campaigns with the mobile app.
Issues with Campaign Layout
My campaign layout changes.
Each time your campaign is viewed on a mobile device the content blocks will be rearranged to appear in single column format. This means that if you choose a template from the Campaign Builder with side-by-side blocks, the block to the left will appear stacked on top of the block to the right.
If you'd like for your campaign content to display in the same order regardless of the device on which it is viewed, use a single-column template.
My images stretch on mobile.
Large images in a text block may stretch your layout when viewed on mobile. Our responsive templates are designed to constrain images that are in certain image content blocks.
I want my campaign to look like the desktop version.
The drag-and-drop templates provided in the Campaign Builder are designed to be mobile responsive. If you want a template that isn't mobile responsive, or you want more control over the template design, you can use a custom-coded template.
This is an advanced feature and is recommended for users familiar with custom coding. You can also contact your developer, or hire a Mailchimp Expert if you need assistance.
If you use a non-responsive layout, your contacts may need to zoom in or scroll horizontally to view campaign content on a mobile device.
Issues with Formatting
I want to change the font size on my responsive campaign.
The style settings in Mailchimp's drag-and-drop templates are designed with mobile devices in mind. Each content block in the Campaign Builder includes a Mobile Styles section where you can change things like font size.
There are blue links in my campaign.
Some mobile devices, especially iPhones and iPads, automatically hyperlink addresses, dates, or phone numbers. This is a function of the device's operating system and is not something that we can control in 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, phone number, or link has disappeared.
Any time your links are formatted to match the background color of a campaign section, they will seem to disappear. This is particularly common with automatically linked dates and phone numbers.
In the affected content block, change the background color or change the link styles for sections in your campaign so they aren't the same color as your campaign background.
My anchor links don't work.
If you have anchor links in your campaign, the links may not work as expected on a mobile device. For example, iPhones require your subscribers to double-tap the link to jump to the linked section. Devices with iOS 9 or later don't support anchor links at all.
Before you send a campaign to your contacts, you can preview and test links in the campaign with Inbox Preview.