Campaigns · 3 min read
Customize Mobile Formatting in the Email Builder
Mobile view controls let you adjust how an email looks on phones while the desktop design stays the same.
How desktop and mobile styles work
- Desktop styling is the default. Mobile uses the desktop values until you change them.
- A mobile override only changes the mobile version. Your desktop design isn't touched.
- Not every setting is available on every element.
- Existing emails keep their current look until you add mobile styling.
- Some inboxes ignore mobile overrides and show the default styling instead. Make sure the default design still works on its own.
For example, you can keep a button at its normal width on desktop and make it full width on mobile.
Mobile formatting vs. device visibility
- Mobile formatting changes how content looks: font size, alignment, spacing and styling.
- Device visibility changes whether content appears at all, for example hiding a large image on mobile.
You can also hide or show whole layouts by device. That gives you three levels of control: mobile formatting, element visibility and layout visibility.
Open the editor
- Go to Marketing → Emails.
- Open Templates or Campaigns.
- Open an email in the Design Editor, or click + New to create one.
Style an element for mobile
- Select the section or element.
- Open its Style settings.
- Switch the device selector to Mobile.
- Turn on the mobile override if that setting needs one.
- Enter the mobile values.
- Switch back to Desktop to confirm your desktop design hasn't changed.
Set mobile text defaults in Appearance
- In the builder, select Appearance.
- Expand Mobile Formatting.
- Turn on the toggle for the text type you want to change: Heading H1, H2, H3, Paragraph or Button.
- Adjust Font Size, Text Align and Line Height.
- Check the mobile preview, then save.
Only turn on a text type when it needs a change. Anything left off uses the desktop value.
Adjust spacing for mobile
- Select the section or element and open Style.
- Expand Margin & padding.
- Switch the device selector to Mobile.
- Adjust the padding and margin values.
Trimming side spacing helps content fit narrow screens.
Customize buttons for mobile
- Select the Button and open the Style tab.
- Expand Alignment, switch to Mobile and choose an alignment.
- Expand Typography, switch to Mobile and adjust font, size, bold, italic or underline.
- Adjust spacing, padding or full width if available.
Images, logos, videos and social icons
- For an Image, Logo or Video, switch the device selector to Mobile and adjust alignment, size and padding. Proportions are locked automatically while you resize.
- For a Social element, adjust icon alignment, size and spacing.
Preview and test
- Click Preview and check the mobile and desktop views.
- Open the three-dot menu and select Test Email.
- Open the test on a real phone and check text size, spacing, buttons and images.
Previews can differ slightly from a real inbox, so always send a test.