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: Setting fluid width buttons on mobile - You can set Button elements in your design to be fluid on mobile and always expand to the full width of the Column it's inside, or turn off this setting to maintain the same width as the Figma/desktop design.. Machine-readable page: /emailify/design/fluid-buttons.md.

Setting fluid width buttons on mobile

You can set Button elements in your design to be fluid on mobile and always expand to the full width of the Column it's inside, or turn off this setting to maintain the same width as the Figma/desktop design.

By default, any Button layers in your designs will be set to be fluid on mobile and expand to the width of the Column (depending on the size of the mobile device screen viewing the email).

You can change this behavior on mobile by clicking on your Button layer, then clicking the Settings layer in the plugin header, and toggling the Full Width Button on Mobile toggle option on or off.

If the width of your Button in the Figma (desktop) design exceeds 300px, the button will automatically be exported as Fluid, otherwise the longer fixed width button would push out the side of the layout on smaller screens.

If your Button layer itself is set to Fill container in your Figma design, Emailify will also preserve the button's horizontal auto-layout alignment in the exported HTML. This means you can left align, center align or right align the button text inside a full-width button by changing the button's auto-layout alignment in Figma.

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.