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.
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
- Click on the wrapper you want to adjust, then select the Mobile Styles tab in the Plugin interface.
- Choose to hide the wrapper on either desktop or mobile devices, or both.
- Enable and set padding to ensure proper spacing and alignment on mobile devices.
- 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
- Click on the text frame you want to optimize.
- Choose to hide the text on either desktop or mobile devices.
- Enable and set padding to ensure proper spacing and alignment on mobile devices.
- Change the font size, line height, letter spacing, and alignment of the text for mobile users.
Image Optimization
- Click on the image frame you want to optimize.
- Choose to hide the image on either desktop or mobile devices.
- Enable and set padding to ensure proper spacing and alignment on mobile devices.
- Change the width and height of the image for mobile users to ensure it fits well on smaller screens.
Button Optimization
- Click on the button frame you want to optimize.
- Choose to hide the button on either desktop or mobile devices.
- Enable and set padding to ensure proper spacing and alignment on mobile devices.
- Change the font size, line height, letter spacing, and alignment of the text within the button.
- Adjust the width, height, and border radius of the button to make it more touch-friendly for mobile users.
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.
Powered by