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.

Hide Layout Blocks on Mobile in Mail Designer 365

You can hide layout blocks on mobile when a section is useful in the desktop email but would make the smartphone version too long, repetitive, or difficult to scan. Mail Designer 365 keeps the layout block available in the desktop design while marking it as hidden in the smartphone view.

Use this feature selectively. Important information, legal details, essential links, and the main call to action should remain available to mobile recipients. Hide only content that is genuinely optional or has an equivalent mobile-friendly replacement.

1. Open the Smartphone view

Switch from the desktop design to the Smartphone view. Review the complete mobile layout before hiding anything so you can see which sections repeat information, create unnecessary scrolling, or do not adapt well to the narrower format.

2. Hide a layout block

Select the layout block you want to remove from the mobile version. Click the eye icon on the left edge of the block. The block is hidden from the smartphone layout but remains part of the desktop version.

3. Read the hidden-block indicator

After the block disappears, Mail Designer 365 displays a small flag with an eye symbol in its place. The number beside the symbol shows how many layout blocks are hidden at that position in the smartphone version. This indicator helps you keep track of content that is still present in the design but not shown on mobile.

4. Hide consecutive blocks

If you hide several adjacent layout blocks, the number in the indicator increases. Use the count to confirm that the intended number of sections is hidden. When several blocks disappear together, review the content before and after the indicator to make sure the mobile reading order still makes sense.

5. Confirm the Desktop Only state

Switch back to the Desktop view. Layout blocks hidden from the smartphone version display a DESKTOP ONLY flag. This confirms that the content remains available to desktop recipients and has not been deleted from the email design.

When hiding a mobile block makes sense

• A decorative desktop section repeats information already presented as live text.
• A wide visual treatment has a separate mobile-friendly replacement.
• A secondary promotion makes the smartphone message unnecessarily long.
• A desktop navigation or supporting section is not required for the mobile action.

Do not hide a block simply because it needs design work. If the section contains essential content, adapt the layout, shorten the copy, resize the imagery, or create a dedicated mobile block instead. The separate mobile-layout workflow is more appropriate when recipients need the information in a different format.

Troubleshoot hidden mobile content

If the eye control is not available, confirm that you are in the Smartphone view and that a complete layout block is selected. If the hidden count is higher than expected, inspect the adjacent indicators and review which consecutive blocks were hidden. Switching to the Desktop view can help identify the affected blocks through their DESKTOP ONLY flags.

When restoring content, check the order again instead of assuming the original position is still ideal for mobile. A block may need shorter copy, a different image crop, or a dedicated smartphone layout before it is made visible to mobile recipients.

Review and test the mobile email

After hiding layout blocks on mobile, preview the full smartphone version from top to bottom. Confirm that headings, paragraphs, images, and buttons still follow a logical sequence. Check that removing a block did not leave an unexplained gap or separate a heading from the content it introduces.

Send a test email and review it on a real phone as well as in the email clients your audience uses most. Verify that the primary call to action, contact information, unsubscribe link, and required legal details remain accessible. Return to the Smartphone view if you need to restore a hidden section or replace it with a more suitable mobile layout.