Design Responsive Emails
Most emails are opened on mobile devices. Templated includes responsive settings on every block so your emails look great on any screen size.
Preview on Mobile
Use the responsive preview controls in the editor toolbar to toggle between desktop and mobile views. The mobile preview simulates a smaller screen so you can check your layout before sending.
Responsive Block Settings
Every block in the visual editor includes a Responsive section in its settings panel. The available options depend on the block type:
Show or Hide Blocks
You can control which blocks appear on which devices:
- Hide on Mobile — The block is visible on desktop but hidden on mobile screens.
- Hide on Desktop — The block is visible on mobile but hidden on desktop screens.
This is useful when you want to show a simplified version of your email on mobile, or include mobile-specific content like a tap-to-call button.
Column Stacking
Multi-column layouts automatically stack into a single column on mobile screens. In the row settings, you can configure:
- Stack on mobile — Columns stack vertically on smaller screens (enabled by default).
- Reverse stack order — Changes the order columns appear when stacked. This is useful when you want a specific column to appear first on mobile.
Mobile Font Size
Text blocks and buttons allow you to set a separate font size for mobile. If the text looks too small on a phone screen, increase the mobile font size without affecting the desktop version.
Mobile Padding
Some blocks allow you to override padding values on mobile. This helps you adjust spacing for smaller screens where the desktop padding may be too large.
Tips
- Always preview your email in mobile view before exporting. Layouts that look great on desktop can feel cramped on a phone.
- Keep your most important content visible on mobile — consider hiding decorative elements that add clutter on small screens.
- Use Hide on Desktop to add mobile-only content, such as a simplified header or condensed navigation.
- Test with real devices when possible. The in-editor preview gives a close approximation, but rendering can vary across email clients.
Related Articles
- Use the Email Editor
- Create Multi-Column Layouts
- Add and Format Text