Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Add responsive mobile override settings for your email layers - Emailify lets you have extra control over how each element of your email renders on mobile by using the Settings panel.. Machine-readable page: /emailify/design/responsive.md.

Add responsive mobile override settings for your email layers

Emailify lets you have extra control over how each element of your email renders on mobile by using the Settings panel.

How do I make an Emailify email responsive on mobile? ​

Emailify exports responsive HTML automatically, and you can fine-tune mobile behavior with mobile override settings on individual Emailify layers. Start with the desktop email frame, then use the plugin preview to check the mobile version before exporting.

Where do I set mobile overrides? ​

Select the Emailify layer you want to adjust, click the Settings button in the plugin header, then use the mobile override controls for that layer. Text layers, Column layers, Row layers, Hero layers, Wrapper layers, image layers, and button layers can expose different mobile controls depending on the selected layer type.

Why does mobile layout start at a different width? ​

Emailify uses a single responsive breakpoint based on the width of the desktop Emailify frame in Figma. If your Emailify frame is 600px wide, mobile styles start at 599px and below. If your frame is wider, the mobile breakpoint will be wider too.

To add mobile style overrides, click on any Emailify layer in your design, then click the Settings button in the plugin header, and apply any desired mobile style overrides for the selected layer as needed.

For example, clicking a Text layer in your email will allow you to override its font size, line height, letter spacing, paragraph spacing, padding and alignment for mobile; whereas clicking a Row layer in your email will allow you to override its padding, the item spacing between its columns, whether it should stack the columns on mobile (or not), and when multiple columns still share a mobile row, their vertical alignment on mobile.

You can visually preview your mobile overrides using the preview feature in the Emailify plugin.

Mobile breakpoint for the emails. The HTML emails exported from Emailify have a single "breakpoint" that's automatically set by the width of the desktop frame in Figma. For example, if your Emailify frame is 600px, the mobile styles/overrides will start showing at 599px and below.

Keeping the width of the email between 600px - 640px is typically recommended, as some email client/app's inbox reader panels can be less than 700px wide, which would render the mobile styles at that width instead of the desktop layout.

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.