Hide email blocks on mobile, keep one template

Keep one template for desktop and phone. Hide the optional pieces on small screens with a CSS media query, and give individual blocks their own spacing and background instead of building a second layout. Only hide what a reader can do without, because some mail clients ignore media queries and will show the block anyway.

Why two templates drift apart

A desktop newsletter often carries things a phone does not need: a wide banner, a three-column product row, a long note in the margin. The traditional fix is a separate mobile template. It works on the day you make it. Then the price changes in one version and not the other, a link gets fixed on desktop only, and a few weeks later the two emails say different things.

One template with a few blocks marked as optional on phones avoids that. Every edit lands in both versions, because there is only one.

How hiding a block works in email

Email has no app logic, so “hide on mobile” comes down to a style rule that applies only on narrow screens. The general pattern looks like this:

<style>
  @media screen and (max-width: 600px) {
    .hide-mobile { display: none !important; }
  }
</style>

<div class="hide-mobile">
  Wide banner that only makes sense on desktop
</div>

That only works where the mail client reads the <style> block and honours media queries. Support varies by client, by app and sometimes by account type, and it changes over time. A client that ignores the rule shows the block. So the safe way to think about it: hiding is a nicety for the clients that support it, never a guarantee.

What to hide, and what never to hide

The test is simple: if a phone reader would be confused or misled without the block, it is not optional. Shorten it instead.

Box style: spacing and backgrounds per block

In the Message Builder, every block has its own box style, set in the panel beside the canvas:

• Padding on each side separately: top, right, bottom and left.
• Background colour.
• Border width and colour.
• Corner radius.

That covers most of what people reach for a second template to do. A quote can sit on a tinted panel. A coupon code can get a border so it reads as something to keep. A footer can get more room to breathe, all without touching the blocks around it. A block with no box style set renders exactly as it did before, with no extra wrapper.

Rounded corners show square in Outlook for Windows, which ignores corner radius. Use them as polish, not as something the design depends on.

A worked example

Take a monthly product newsletter with this layout on desktop:

1. A menu row with five links.
2. A wide seasonal banner.
3. A heading and two short paragraphs about the month’s news.
4. A three-column row of products, each with an image, a name, a price and a button.
5. A coupon code in a quote block.
6. A footer with your address and the unsubscribe link.

One way to make that work on a phone without a second template:

• Hide the menu and the banner on mobile. Five links wrap into a clumsy block on a narrow screen, and the banner shrinks until its text is unreadable. Neither carries anything the reader needs.
• Leave the product row alone. Columns stack on phones, so each product becomes its own row with its price and button intact.
• Give the coupon a border and a tinted background with box style, so it stands out on both screen sizes.
• Add bottom padding to the footer so the unsubscribe link is not cramped against the edge of the screen.

The phone version is shorter and loses nothing a reader would miss. If a client ignores the media query, the reader sees the desktop layout stacked, which is longer but complete.

Hide on mobile in the Message Builder

Any block can be marked Hide on mobile in the same panel. The renderer adds a media query that hides it on screens 600 pixels wide or narrower, so one email serves both. Columns already stack on phones by default, so a three-column row becomes three rows rather than three slivers; hiding is for blocks that should go entirely.

Before sending, check it two ways:

1. Switch the preview to mobile. The builder’s preview renders the real email at phone width, so hidden blocks disappear there.
2. Send a test to your phone. The preview shows what the HTML asks for. Your own mail app shows what it actually does.

The honest limit

Hiding relies on the mail client honouring media queries. Clients that ignore them show the block anyway, on any screen. That is why the rule above matters: hide only what is optional, so the worst case is a slightly longer email, never a missing price or a missing unsubscribe link.

If you are bringing existing templates over from another platform, read Move your email templates without the old tracking pixel, or try the builder with a 14-day trial.