Responsive Email Without Media Queries

The Media Query Problem in Email

If you come from web development, your first instinct for responsive design is to reach for @media queries. In email, that instinct will burn you. A significant number of email clients either strip media queries entirely or don't support them at all.

The biggest offender is Gmail. Gmail's mobile app — used by over 1.8 billion people — strips all <style> blocks in non-Gmail-sent emails, which means your carefully crafted breakpoints simply vanish. Yahoo Mail has historically been unreliable with media query support. Many versions of Outlook on Windows ignore them completely because they use Microsoft Word's rendering engine, which has no concept of @media.

This isn't a minor edge case. When you add up Gmail mobile, Outlook desktop, and Yahoo Mail, you're looking at a majority of your audience potentially never seeing your responsive styles. You need a different approach.

The Fluid Hybrid Method: Core Principle

The fluid hybrid method — sometimes called the "spongy" method, popularized by email developers like Nicole Merlin and Rémi Parmentier — achieves responsive behavior using only inline CSS properties that every email client respects. The core idea is simple: use div elements with max-width for modern clients, and wrap them in conditional "ghost tables" for Outlook.

The approach rests on three pillars:

Fluid width: Elements use width: 100% combined with max-width to be flexible up to a ceiling.
Inline-block display: Columns use display: inline-block so they naturally stack when the container is too narrow to hold them side by side.
Ghost tables: Outlook conditional comments (<!--[if mso]>) provide table-based structure exclusively for Outlook, which doesn't support max-width on div elements.

Building a Two-Column Layout

Let's walk through a concrete example. We want two columns that sit side by side on desktop and stack vertically on mobile — without a single media query.

The Outer Container

First, we set up a centered container with a maximum width:

<!-- Outer wrapper for full-width background -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4;">
  <tr>
    <td align="center" style="padding: 20px 0;">

      <!-- Container: 600px max, fluid below that -->
      <div style="max-width: 600px; margin: 0 auto;">

        <!--[if mso]>
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td>
        <![endif]-->

        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: #ffffff;">
          <tr>
            <td style="padding: 20px; font-family: Arial, sans-serif;">
              <!-- Content goes here -->
            </td>
          </tr>
        </table>

        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->

      </div>

    </td>
  </tr>
</table>

The <div style="max-width: 600px;"> constrains width in modern clients. The MSO conditional comments create a fixed-width <table> for Outlook, which doesn't respect max-width on div elements.

The Two-Column Section

Now the interesting part — two columns that reflow without media queries:

<!--[if mso]>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 290px; vertical-align: top;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #333333;">
        <h3 style="margin: 0 0 10px 0; font-size: 18px;">Column One</h3>
        <p style="margin: 0;">This is the left column content. It will sit side by side with column two on wide screens and stack on narrow ones.</p>
      </td>
    </tr>
  </table>
</div>

<!--[if mso]>
</td>
<td width="50%" valign="top">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 290px; vertical-align: top;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #333333;">
        <h3 style="margin: 0 0 10px 0; font-size: 18px;">Column Two</h3>
        <p style="margin: 0;">This is the right column content. On mobile or narrow screens, it drops below column one naturally.</p>
      </td>
    </tr>
  </table>
</div>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

How This Works

In modern email clients (Apple Mail, iOS Mail, Gmail, Yahoo), the two div elements are display: inline-block with width: 100% and max-width: 290px. When the parent container is 600px wide, both divs fit side by side (290 + 290 = 580, with some room for padding). When the viewport shrinks below about 580px, the second div can no longer fit beside the first and wraps to a new line — stacking vertically. No media query needed.

In Outlook (which ignores max-width and inline-block on divs), the MSO conditional comments create a proper two-cell table row. Outlook reads only the content between , so it gets a fixed table layout. Every other client ignores those comments entirely.

The Min-Width / Max-Width Trick

Sometimes you want a column to have a minimum width so it doesn't shrink too small on mid-size screens. You can combine min-width and max-width to create a range:

<div style="display: inline-block; min-width: 200px; max-width: 290px; width: 100%; vertical-align: top;">
  <!-- Column content -->
</div>

This tells the client: "This element should be as wide as possible (100%) but never wider than 290px and never narrower than 200px." When the container can't fit two 200px columns, they stack. This gives you finer control over the breakpoint behavior without a single media query.

Three-Column Layouts

The same principle extends to three or more columns. Set each column's max-width to roughly one-third of your container (e.g., 190px for a 600px container), and they'll naturally reflow. On mid-size screens, you might get two columns on the first row and one below. On narrow screens, all three stack. The behavior is fluid and automatic.

Ghost Tables: A Deeper Look

The term "ghost table" comes from the fact that these tables are invisible to every client except Outlook. They exist only inside MSO conditional comments. Understanding the MSO comment syntax is essential:

 — Content rendered only by Outlook (Word-based rendering engine).
 ...  — Content hidden from Outlook but visible everywhere else. Note the extra comment syntax that makes this work.

Ghost tables solve Outlook's inability to handle max-width, display: inline-block, and flexbox. Without them, your multi-column layout in Outlook would be a single stacked column at full width.

Testing Your Fluid Hybrid Layout

Even though the fluid hybrid method is designed to work everywhere, you must still test across clients. Here's a practical checklist:

Apple Mail (macOS): Usually renders perfectly. Good baseline test.
iOS Mail: Test in both portrait and landscape. Columns should stack in portrait on iPhone SE-sized screens.
Gmail (web and mobile): Confirm columns are side by side on desktop Gmail and stack on Gmail mobile app.
Outlook 2019/365 (Windows): Verify ghost tables render the correct column widths. Check that padding and spacing match your design.
Outlook.com (web): Different rendering engine from Outlook desktop. Test separately.
Yahoo Mail: Has its own quirks with max-width. Verify columns behave correctly.

Use tools like Litmus or Email on Acid to get screenshots across 90+ clients simultaneously. For quick checks during development, Apple Mail and Gmail web cover the most common rendering paths.

When to Enhance With Media Queries

The fluid hybrid method is your foundation — the baseline that works everywhere. You can still layer media queries on top as a progressive enhancement for clients that support them. For example, you might use a media query to adjust font sizes or hide a decorative image on small screens in Apple Mail. The key principle is: your layout must work without media queries. Anything in a media query is a bonus, not a requirement.

Summary

The fluid hybrid method solves the fundamental problem of responsive email design: most clients don't reliably support media queries. By combining inline-block divs with max-width constraints and Outlook-specific ghost tables, you get a layout that reflowed naturally across screen sizes. It takes more effort upfront than writing a media query, but it works in the one place that matters most — your subscribers' actual inboxes.