Skip to main content
In today’s mobile-first world, ensuring your email looks flawless on smaller screens is crucial. The Mobile Styles section allows you to make specific styling adjustments for mobile devices, guaranteeing a seamless viewing experience for your audience. Screen recording of the Mobile Styles tab in the plugin interface

​
Layers that Support Mobile Styles

You will need to select a layer that you would like to apply mobile styles to. The following layers are supported:
  • mj-wrapper: Show or hide a wrapper on mobile, update the padding, and stack or reverse stack columns.
  • mj-text-frame: Customize your text on mobile. Show or hide the text component, add padding, or update the font size, line-height and alignment.
  • mj-image-frame: Show or hide on mobile or add padding around your image on mobile.
  • mj-button-frame: Show or hide a button component on mobile. Update padding and text style.

​
Applying Mobile Styles to Different Components

​
Wrapper Optimization

  1. Click on the wrapper you want to adjust, then select the Mobile Styles tab in the Plugin interface.
  2. Choose to hide the wrapper on either desktop or mobile devices, or both.
  3. Enable and set padding to ensure proper spacing and alignment on mobile devices.
  4. If required, set the following options:
    • Border Radius: Add a border radius around the wrapper.
    • Stack Columns: For multi-column wrappers, you can stack columns into a row for better readability on mobile.
    • Reverse Stack Columns: Reverse the order of stacked columns if needed.

​
Text Optimization

  1. Click on the text frame you want to optimize.
  2. Choose to hide the text on either desktop or mobile devices.
  3. Enable and set padding to ensure proper spacing and alignment on mobile devices.
  4. Change the font size, line height, letter spacing, and alignment of the text for mobile users.

​
Image Optimization

  1. Click on the image frame you want to optimize.
  2. Choose to hide the image on either desktop or mobile devices.
  3. Enable and set padding to ensure proper spacing and alignment on mobile devices.
  4. Change the width and height of the image for mobile users to ensure it fits well on smaller screens.

​
Button Optimization

  1. Click on the button frame you want to optimize.
  2. Choose to hide the button on either desktop or mobile devices.
  3. Enable and set padding to ensure proper spacing and alignment on mobile devices.
  4. Change the font size, line height, letter spacing, and alignment of the text within the button.
  5. Adjust the width, height, and border radius of the button to make it more touch-friendly for mobile users.

​
Setting a Custom Mobile Breakpoint

Every template switches from desktop to mobile styles at a breakpoint width. You can now set your own per template, instead of relying on a single fixed value for every design.
  1. Select your Main Frame in Figma, then open the Mobile Styles tab.
  2. At the top of the panel, enter a pixel value in the Breakpoint field. Leave it blank to use the frame’s own width as the placeholder default.
  3. Any screen narrower than your breakpoint receives the mobile styles you’ve set on this tab (padding, font size, alignment, hide/show, and everything else covered above). Anything at or wider uses your desktop styles.
If you have existing templates: previously, every template switched to mobile styles at a fixed 768px, regardless of its own width. Leaving the Breakpoint field blank now uses the template’s own frame width instead. For templates built at 768px wide this changes nothing, but if your frame is a different width, set an explicit Breakpoint value to match your template’s prior behavior exactly.
Save it once, use it everywhere. Check Save as default for new templates to make your current value the default for every new template you create going forward. The checkbox label shows the saved value (for example, “Save as default for new templates (440)”), and an Update default button appears whenever the current template’s breakpoint no longer matches the saved one, so you can re-point the default without unchecking and rechecking the box.Editing the breakpoint on one template only changes that template. It never silently updates the saved default, and the saved default is shared across your account, so unchecking the box clears what new templates inherit going forward.

​
Example Usage

  • Mobile-Specific Padding
    • For a text block, add 10px padding on mobile to ensure it has enough breathing space.
  • Stack Columns
    • For a multi-column wrapper with text and images, stack the columns so that the text appears above the image on mobile.
  • Adjust Button Size
    • Increase the height of a button to 50px on mobile to make it easier to tap.
  • Hide Elements
    • Hide large images on mobile to reduce loading time and improve readability.
By following these steps, you can effectively optimize your email designs for mobile devices, ensuring that your emails are both visually appealing and functional on smaller screens.