Skip to main content
Desktop images often need different spacing or dimensions on a narrow screen. Use Mobile Styles to adjust the image without changing the desktop design.

​
Adjust an image for mobile

1

Select the image block

Select the mj-image-Frame or image in the Figma Layers panel.
2

Open Mobile Styles

Open the Mobile Styles tab in the plugin.
3

Set the mobile treatment

Adjust the width, height, padding, or visibility for mobile. Keep the original aspect ratio unless the mobile design intentionally uses a different crop.
4

Preview a narrow device

Open Preview and choose a narrow phone width. Check the image together with the text and button around it.

​
Choose the right treatment

​
Let it scale

Use the same image when the subject remains clear at a smaller width. This is the simplest option for logos, product photos, and full-width heroes with a clear focal point.

​
Add mobile padding

Add left and right padding when an image feels too wide or touches the viewport edge. Keep the padding consistent with the text blocks around it.

​
Use a mobile-specific crop

Use a different image when the desktop crop becomes unreadable on a phone. A tall or square crop often works better than a wide banner. Follow Show or Hide Content if you build separate desktop and mobile blocks.

​
Hide the image

Hide an image only when the message still makes sense without it. Hidden content remains in the email HTML and may still be downloaded by some clients, so hiding an image is not a reliable performance optimization.

​
Keep images sharp

Provide source images at 2x their displayed dimensions. A 320px-wide mobile image should have a source around 640px wide. Do not make the image frame larger than the source asset. The plugin can scale an image down cleanly, but scaling a small image up makes it blurry.

​
Common problems

​
The image looks stretched

The mobile width and height do not match the source aspect ratio. Remove one override or calculate the matching dimension.

​
The subject is cropped out

The desktop focal point does not work on mobile. Use a mobile-specific crop rather than forcing the wide image into a narrow box.

​
The image still appears on one device

Confirm whether you hid the mj-image-Frame or only the image inside it. Preview both sides of your custom mobile breakpoint.