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 on 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 on a Row layer in your email will allow you to override its padding, the item spacing between its columns and whether it should stack the columns on mobile (or not).

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.

Was this page helpful?

UTM Parameter LinksShow/Hide on Mobile/Desktop