Modifying a layout block for the mobile version lets you refine a Mail Designer 365 email for smartphone readers without changing the main desktop layout. This is useful when a block needs different spacing, sizing, or positioning at a narrow width. The workflow keeps the same message while giving you more control over responsive email layout blocks.
Review the design in Smartphone view
Start with the desktop design in a stable state, then switch to Smartphone view. Review the full email before separating any block. A small typography adjustment may be possible with a mobile-only text style, while a structural change such as resizing or rearranging a layout block requires the mobile layout workflow described here.
Check the headline, body copy, images, buttons, and spacing at the smartphone width. Identify the specific block that needs attention so you can keep the change focused and avoid creating unnecessary differences between desktop and mobile.
Separate the mobile layout from the desktop version
When you first make a structural change in Smartphone view, such as resizing a layout block, Mail Designer 365 displays a confirmation window. This step prevents an accidental mobile-only change and makes the relationship between the two layouts clear.
Choose Separate when you intend to modify the smartphone layout independently. After separation, changes to that mobile version no longer alter the corresponding desktop layout. Keep the content and destination links consistent unless the campaign itself requires different information.
Modify the layout block for mobile
After separating the design, resize, reposition, or adjust the layout block for the available smartphone width. Mail Designer 365 marks changed blocks with the Mobile Modified label. This indicator helps you and other collaborators see that the block has mobile-specific settings.
When modifying a layout block for the mobile version, make the smallest change that solves the problem. For example, reduce excessive vertical space, give a button enough room to remain tappable, or reposition an image so the reading order stays clear. Preview surrounding blocks as well, because changing one block can affect the rhythm of the complete email.
Compare mobile and desktop versions
Switch between Smartphone and Desktop views after each meaningful adjustment. Confirm that the desktop version remains unchanged and that the mobile version still communicates the same information. Pay particular attention to text wrapping, image crops, button labels, linked destinations, and legal information.
Responsive email layout blocks should support a clear reading order. Avoid using a mobile-only arrangement that changes the meaning of the message or hides essential information. If a block contains text, also check whether a mobile-only text style would be a more appropriate and more limited adjustment.
Reset the mobile design to the desktop version
If you no longer want the separated mobile layout, choose Edit > Reset design to desktop version. This removes the mobile-specific structural changes and restores the desktop arrangement for the smartphone layout. Because the reset undoes the changes made in the separated mobile version, review the design before confirming it.
Test the mobile layout before sending
Use Check Preview to inspect the result in the inbox environments that matter to your audience, then send a test email to a real phone when possible. Confirm that each button and linked image opens the correct destination and that no content overlaps, clips, or becomes too small to read.
For text-specific changes that do not require separating a complete block, see the guide to mobile only text styles. Choosing the narrowest suitable tool keeps desktop and mobile versions easier to maintain.
How Can We Help?