Overview
Most of your recipients are reading your emails on their phone, so what looks balanced on a desktop preview can feel cramped, oversized, or out of place on a small screen. The good news is the visual email editor has a set of mobile-specific controls built right in, so you can adjust how buttons and images behave on smaller devices without touching the desktop version of your template.
This guide covers the two areas you'll reach for most often: button sizing and full-width behaviour under Mobile Formatting, and image settings like alignment, responsiveness, padding, and hiding elements on specific devices.
Optimise buttons for mobile
Buttons are usually where you want to draw the eye, so it's worth making sure they're easy to tap and properly sized on a phone. You'll find these controls in the Appearance tab under Mobile Formatting.
- Open your template in the visual email editor.
- Select a Button block that's already been placed on the design canvas. The settings panel on the right will update to show the options for that block.
- Click the Appearance tab at the top of the right-hand settings panel.
- Scroll down and click Mobile Formatting to expand the section.
- Find Button text size and select your preferred size from the dropdown. A slightly larger size than your desktop button text usually reads better on smaller screens.
- Toggle Full-width buttons on if you want your buttons to stretch the full width of the email on mobile. This makes them much easier to tap and gives them more visual presence on a small screen.
- With Full-width buttons turned on, click More to set the Top and Bottom padding around each button. This controls the breathing room between the button and the content around it.
That's it — your buttons will now adjust automatically when the email is opened on a mobile device, while keeping their original look on desktop.
Optimise images for mobile
Image settings are configured per image, so you can tailor the behaviour to suit each one. You'll find these controls in the Content tab under Blocks, after selecting an image in your template.
- Open your template in the visual email editor.
- Select an Image block that's already been placed on the design canvas. The settings panel on the right will update to show the options for that image.
- In the right-hand panel, click the Content tab, then expand the Blocks section to view the image settings.
- Under Alignment, choose how the image should sit on desktop (left, centre, or right). To set a different alignment for mobile, click the mobile icon next to the alignment controls and pick your mobile-specific option. Handy when, say, a logo sits left on desktop but reads better centred on a phone.
- Toggle Responsive image on so the image scales to fit the width of the screen it's being viewed on. This is the setting that stops large images from spilling off the side of a phone display.
- Under Padding, click More to expand the controls, then click the mobile icon to set padding values specifically for mobile. Useful when an image needs less spacing on a smaller screen to keep the layout tight.
- Use Hide element at the bottom of the panel to control whether the image shows on desktop, mobile, or both. Click the desktop icon to hide it on desktop, or the mobile icon to hide it on mobile.
When to use Hide element
A common use case is logos. Your brand logo might be designed for a wide desktop header (say, 400px wide) but look oversized or awkward on a phone. The fix is to add both versions to your template — the wide logo and a smaller, mobile-friendly one — then use Hide element to hide the wide version on mobile and the smaller version on desktop. Each device gets the right logo automatically, no separate template required.
Your images are now set up to behave properly across devices, so recipients get a layout that's been thought through for the screen they're holding.
What's next
Once your buttons and images are set, it's worth sending a test email to yourself and opening it on both a desktop and a phone to see how everything lands. Small tweaks at this stage save a lot of "why does that look weird on my phone?" feedback later on.