HTML Email Media Queries: Breakpoints, Client Support & Copy-Ready Examples

HTML email media queries are CSS rules that change an email’s layout when conditions such as viewport width are met. A practical setup uses a fluid email as the base, then applies a breakpoint such as 600px to stack columns, reduce spacing, resize text, and improve buttons on smaller screens.

Google’s Gmail CSS documentation, updated September 15, 2026, confirms support for media queries using min-width, max-width, orientation, and resolution. Can I Email currently estimates 80.48% combined full and partial support for @media, although individual client behavior still varies.

This guide is for email developers, designers, and marketers working with responsive HTML. You will get practical breakpoint guidance, client-support notes, fallback principles, and copy-ready examples you can adapt to real campaigns.

What Are Email Media Queries?

HTML email media queries are conditional CSS rules that apply styles only when a defined condition is true. In responsive email, that condition is usually the width of the area displaying the message.

The basic syntax is:

@media screen and (max-width: 600px) {
  .example {
    width: 100% !important;
  }
}

This means:

When the viewport is 600 pixels wide or narrower, apply the styles inside this block.

A media query has three main parts:

@media
The condition
The CSS rules

For example:

@media screen and (max-width: 600px) {
  .mobile-padding {
    padding: 20px !important;
  }
}

The email can use larger spacing by default.

Then screens at or below 600px receive smaller padding.

W3C defines media queries as a way to conditionally apply styles based on characteristics such as viewport width. Its 2026 Media Queries specification also defines width as the width of the targeted display area.

How Do Media Queries Work?

Email media queries override or add styles when the recipient’s email environment matches the specified condition. They are commonly used to stack columns, change widths, reduce padding, resize text, adjust buttons, and control selected content on smaller screens.

Imagine a two-column email.

Desktop:

[ Image ] [ Text ]

Mobile:

[ Image ]

[ Text ]

The default HTML can create the desktop layout.

The media query changes the two columns into full-width blocks on smaller screens.

For example:

@media screen and (max-width: 600px) {
  .stack-column {
    display: block !important;
    width: 100% !important;
  }
}

The class is then added to each column.

The media query becomes the responsive enhancement.

Where Should Media Queries Go?

Put HTML email media queries inside a <style> block, usually within the <head> of the email document. Keep critical base styling inline, then use the media query to override those inline values where supported.

Example:

<head>
  <style type="text/css">
    @media screen and (max-width: 600px) {
      .content-padding {
        padding: 24px 20px !important;
      }
    }
  </style>
</head>

Then the email body can use:

<td
  class="content-padding"
  style="padding:40px;"
>
  Email content
</td>

Desktop receives:

padding: 40px;

Supporting smaller-screen environments receive:

padding: 24px 20px !important;

Google currently documents support for <style> blocks and standard media queries in Gmail.

Why Is !important Common?

!important is commonly used in email media queries because the responsive rule often needs to override a style already placed inline on the HTML element.

For example:

<td
  class="responsive-padding"
  style="padding:40px;"
>

Your media query might use:

@media screen and (max-width: 600px) {
  .mobile-padding {
    padding: 20px !important;
  }
}

Without !important, the inline value may retain higher priority.

Use it where the responsive override needs to win.

You do not need to add it mechanically to every property.

What Breakpoint Should You Use?

For many HTML emails, 600px is a practical starting breakpoint because email containers are often designed around a similar maximum width. When the available area becomes narrower than the full email, the responsive styles can begin adapting the layout.

A common query is:

@media screen and (max-width: 600px) {
  /* Mobile adjustments */
}

This does not mean 600px is a mandatory email standard.

Your breakpoint should follow the point where your design needs to change.

For example, imagine a two-column section.

Each column needs about 280px of usable space.

Once the available width becomes too narrow, stacking becomes more practical.

That visual constraint can determine the breakpoint.

600px vs 480px

Both values can be useful.

Breakpoint	Practical Use
600px	General mobile and narrow-window adjustments
480px	More phone-specific refinements
400px	Compact-screen adjustments when genuinely needed

A simple campaign may need only one query:

@media screen and (max-width: 600px) {
  /* Mobile styles */
}
A more detailed design might use:

@media screen and (max-width: 600px) {
  /* General mobile */
}

@media screen and (max-width: 480px) {
  /* Narrower phones */
}

Avoid adding breakpoints for individual iPhone or Android models.

Responsive email should respond to available space.

It does not need a separate rule for every device.

Should You Use 599.98px?

You may see breakpoints such as:

@media screen and (max-width: 599.98px)

instead of:

@media screen and (max-width: 600px)

The first approach avoids having two adjacent breakpoint conditions overlap at exactly 600px.

W3C notes that fractional viewport sizes can exist because of scaling and pixel density. Its current specification discusses more precise breakpoint boundaries for this reason.

For most email campaigns, however, a straightforward 600px breakpoint is easier to maintain.

Use more precise boundaries only when your layout genuinely benefits from them.

Use Width or Device Width?

Prefer width, max-width, and min-width for new responsive email code rather than relying on device-width. Width-based queries respond to the actual viewport or rendering area available to the email.

Recommended:

@media screen and (max-width: 600px) {
}

Less useful for most new layouts:

@media screen and (max-device-width: 600px) {
}

This distinction matters because the physical device width and the space given to the email are not always the same.

An email may appear:

In a narrow desktop reading pane
In split-screen mode
Inside a webmail message area
In an embedded frame

The layout needs to respond to the available space.

W3C now classifies the device-width family of media features as deprecated and recommends viewport-related features such as width instead.

Google still documents Gmail support for both max-width and max-device-width, but max-width is usually the more useful choice for responsive email layouts.

Email Client Support

Media-query support is broad enough to be useful, but it is not uniform enough to make media queries the only responsive strategy. Build a readable base email first, then use responsive CSS to enhance clients that apply it.

Can I Email’s current @media page estimates:

39.02% full support
41.46% partial support
80.48% combined full and partial support

Its notes also document client-specific conditions and partial support. The underlying @media test on that page was last run in December 2023, so client-specific testing remains important.

Gmail

Google’s documentation is especially useful because it is first-party.

As of September 2026, Gmail officially documents support for:

all
screen
min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution
and
only

Can I Email also documents some partial-support conditions for Gmail contexts, including differences involving non-Google accounts.

So test the actual environments important to your audience.

Apple Mail

Can I Email lists @media support across Apple Mail environments.

That makes Apple Mail a strong environment for responsive enhancements.

Still, test the complete email rather than assuming every CSS property inside the query behaves identically.

Outlook

Outlook should be treated as a family of different environments rather than one rendering engine.

Support varies across:

Classic Outlook for Windows
Newer Outlook environments
Outlook.com
Outlook for macOS
Outlook mobile

That is why your base structure should remain readable without depending on the responsive query.

For a broader explanation of rendering differences, read why emails look different in every inbox.

Yahoo Mail

Can I Email records support with partial conditions for Yahoo environments.

Keep width-based queries simple and maintain a functional fallback layout.

Practical Client Rule

Do not ask:

Does every client support this media query perfectly?

Ask:

Is the email still usable if the media query does not run?

That is the safer responsive-email mindset.

Client Support Strategy

Use this practical model:

Layer	Purpose
Base HTML	Works without media queries
Inline CSS	Critical layout and visual styling
Fluid widths	Adapt naturally where possible
Media queries	Improve narrower layouts
Outlook-specific code	Supports selected desktop Outlook cases
Testing	Confirms delivered behavior

Think of media queries as one layer.

They should not carry the full responsibility for responsiveness.

Build the Fluid Base

A strong responsive email starts with a fluid container before any media query is added. The email should shrink naturally where possible so unsupported clients still receive readable content.

A common wrapper is:

<table
  role="presentation"
  width="100%"
  cellpadding="0"
  cellspacing="0"
  border="0"
>
  <tr>
    <td align="center">

      <table
        role="presentation"
        width="100%"
        cellpadding="0"
        cellspacing="0"
        border="0"
        style="width:100%; max-width:600px;"
      >
        <tr>
          <td style="padding:32px;">
            Email content
          </td>
        </tr>
      </table>

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

The outer table fills the available space.

The inner table can shrink while staying capped at 600px in clients that support max-width.

You can then add responsive enhancements.

For broader mobile layout principles, see MailEditor’s mobile-responsive email design guide.

Stack Columns on Mobile

Column stacking is one of the most useful HTML email media-query patterns. Two desktop columns can become two full-width rows when the available space becomes narrow.

CSS

@media screen and (max-width: 600px) {
  .stack-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

HTML

<table
  role="presentation"
  width="100%"
  cellpadding="0"
  cellspacing="0"
  border="0"
>
  <tr>
    <td
      class="stack-column"
      width="50%"
      valign="top"
      style="width:50%;"
    >
      Left column
    </td>

    <td
      class="stack-column"
      width="50%"
      valign="top"
      style="width:50%;"
    >
      Right column
    </td>
  </tr>
</table>

Desktop:

LEFT | RIGHT

Mobile:

LEFT

RIGHT

The content order in the HTML remains important.

If the media query does not apply, the base order should still make sense.

Make Images Responsive

Responsive images should fit their available container without becoming wider than the email. Use a sensible HTML width with fluid CSS so the image can shrink on smaller screens.

Example:

<img
  src="https://example.com/image.jpg"
  width="600"
  alt="Product collection"
  style="
    display:block;
    width:100%;
    max-width:600px;
    height:auto;
    border:0;
  "
>

For a smaller fixed image:

<img
  src="https://example.com/product.jpg"
  width="280"
  alt="Blue travel bag"
  style="
    display:block;
    width:100%;
    max-width:280px;
    height:auto;
  "
>

A media query can also force selected images to fill a mobile column:

@media screen and (max-width: 600px) {
  .mobile-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

Keep the base image usable even without this override.

Adjust Mobile Spacing

Large desktop padding can consume too much space on narrow screens. Use a media query to reduce horizontal padding while maintaining comfortable vertical separation.

Desktop HTML:

<td
  class="section-padding"
  style="padding:40px;"
>
  Content
</td>

Mobile CSS:

@media screen and (max-width: 600px) {
  .section-padding {
    padding: 28px 20px !important;
  }
}

You could also use separate utility classes:

@media screen and (max-width: 600px) {
  .px-mobile-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .py-mobile-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

This makes spacing rules easier to reuse.

Resize Text on Mobile

Media queries can adjust typography when a desktop heading or body style feels too large or too small on narrow screens. Use the smallest number of responsive font overrides needed to preserve a clear hierarchy.

Desktop:

<h1
  class="mobile-heading"
  style="
    margin:0;
    font-size:36px;
    line-height:42px;
  "
>
  New Collection
</h1>

Mobile query:

@media screen and (max-width: 600px) {
  .mobile-heading {
    font-size: 28px !important;
    line-height: 34px !important;
  }
}

For body text:

@media screen and (max-width: 600px) {
  .mobile-body {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

Do not solve every wrapping issue by shrinking text.

Sometimes the better fix is:

Shorter headline
Smaller side padding
Better column stacking
Simpler content structure

Make Buttons Mobile Friendly

Buttons should remain easy to see and interact with after the layout becomes narrower. A media query can make selected CTAs wider or full width on mobile.

Desktop button:

<<a

  href="https://example.com"
  class="mobile-button"
  style="
    display:inline-block;
    padding:14px 24px;
    background:#111111;
    color:#ffffff;
    text-decoration:none;
    font-family:Arial, sans-serif;
    font-size:16px;
  "
>
  Shop the Collection
</a>

Mobile enhancement:

@media screen and (max-width: 600px) {
  .mobile-button {
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
}

Use full-width mobile buttons when they support the design.

They are not required for every email.

Hide Elements Carefully

Media queries can hide selected decorative or secondary elements on smaller screens, but important content should not depend on this technique. Hidden content remains part of the email HTML and may behave differently in clients that ignore your CSS.

Example:

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

Use:

<td class="hide-mobile">
  Decorative content
</td>

Good candidates include:

Decorative spacer graphics
Nonessential secondary imagery
Optional navigation

Avoid hiding information such as:

Offer conditions
Important dates
Prices
Transaction details
Primary CTA

If the media query does not apply, your message should still remain correct.

Change Alignment on Mobile

Desktop design may use left-aligned content beside an image.

Mobile may work better centered.

Use:

@media screen and (max-width: 600px) {
  .mobile-center {
    text-align:center !important;
  }
}

HTML:

<td
  class="mobile-center"
  style="text-align:left;"
>
  Content
</td>

@media screen and (max-width: 600px) {
  .mobile-center {
    text-align:center !important;
  }
}

This is useful for:

CTA sections
Product cards
Hero content
Social links

Only change alignment when it improves the mobile composition.

Use Orientation Queries Carefully

Google currently documents Gmail support for orientation media queries.

Example:

@media screen and (orientation: landscape) {
  .landscape-padding {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

Most marketing emails do not need separate portrait and landscape designs.

Width-based rules usually solve the real layout problem more simply.

Add an orientation query only when the campaign has a clear need.

Copy-Ready 600px Media Query

Here is a useful general starting block:

<style type="text/css">
  @media screen and (max-width: 600px) {

    .email-container {
      width: 100% !important;
      max-width: 100% !important;
    }

    .stack-column {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    .mobile-padding {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    .mobile-heading {
      font-size: 28px !important;
      line-height: 34px !important;
    }

    .mobile-image {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }

    .mobile-button {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
    }

    .mobile-center {
      text-align: center !important;
    }

    .hide-mobile {
      display: none !important;
    }

  }
</style>

Do not copy every class into every campaign.

Keep o

@media screen and (max-width: 480px) {
  .small-screen-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .small-screen-heading {
    font-size: 24px !important;
    line-height: 30px !important;
  }
}

nly the utilities your email actually uses.

Copy-Ready 480px Query

For compact screens, add a second breakpoint only when necessary.

@media screen and (max-width: 480px) {
  .small-screen-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .small-screen-heading {
    font-size: 24px !important;
    line-height: 30px !important;
  }
}

A typical setup might be:

@media screen and (max-width: 600px) {
  /* Main responsive changes */
}

@media screen and (max-width: 480px) {
  /* Only the extra adjustments needed on narrow screens */
}

The second breakpoint should solve a visible problem.

Do not add it only because another template uses one.

Complete Copy-Ready Example

This example combines a fluid container, two desktop columns, responsive images, mobile stacking, smaller padding, and a full-width mobile CTA.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >

  <style type="text/css">
    @media screen and (max-width: 600px) {

      .email-container {
        width: 100% !important;
        max-width: 100% !important;
      }

      .stack-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .mobile-padding {
        padding: 24px 20px !important;
      }

      .mobile-heading {
        font-size: 28px !important;
        line-height: 34px !important;
      }

      .mobile-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
      }

      .mobile-button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
      }
    }
  </style>
</head>

<body
  style="
    margin:0;
    padding:0;
    background:#f4f4f4;
  "
>

  <table
    role="presentation"
    width="100%"
    cellpadding="0"
    cellspacing="0"
    border="0"
    style="width:100%; background:#f4f4f4;"
  >
    <tr>
      <td align="center">

        <table
          role="presentation"
          class="email-container"
          width="600"
          cellpadding="0"
          cellspacing="0"
          border="0"
          style="
            width:100%;
            max-width:600px;
            background:#ffffff;
          "
        >
          <tr>

            <td
              class="stack-column"
              width="50%"
              valign="middle"
              style="width:50%;"
            >
              <img
                src="https://example.com/product.jpg"
                width="300"
                alt="Featured product"
                class="mobile-image"
                style="
                  display:block;
                  width:100%;
                  max-width:300px;
                  height:auto;
                  border:0;
                "
              >
            </td>

            <td
              class="stack-column mobile-padding"
              width="50%"
              valign="middle"
              style="
                width:50%;
                padding:32px;
                font-family:Arial, Helvetica, sans-serif;
              "
            >

              <h1
                class="mobile-heading"
                style="
                  margin:0 0 16px;
                  font-size:32px;
                  line-height:38px;
                  color:#111111;
                "
              >
                Meet the New Collection
              </h1>

              <p
                style="
                  margin:0 0 24px;
                  font-size:16px;
                  line-height:24px;
                  color:#444444;
                "
              >
                Explore the latest products designed
                for everyday use.
              </p>

              <a
                href="https://example.com"
                class="mobile-button"
                style="
                  display:inline-block;
                  padding:14px 24px;
                  background:#111111;
                  color:#ffffff;
                  text-decoration:none;
                  font-size:16px;
                  line-height:20px;
                "
              >
                Explore the Collection
              </a>

            </td>

          </tr>
        </table>

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

</body>
</html>

The important concept is not the specific colors or copy.

It is the architecture:

Fluid base → reusable classes → width breakpoint → mobile overrides

What If Media Queries Do Not Run?

The email should remain readable and actionable even when the responsive query is not applied. That is why the base layout, live text, images, CTA destinations, and content order should work independently.

Build fallback behavior into the original HTML.

For example:

Container

Use:

width="100%"

with:

max-width:600px;

where appropriate.

Images

Use:

max-width:100%;
height:auto;

Content

Keep important information in live HTML.

Layout

Use structures that remain understandable before stacking.

CTA

Make the button readable even if it stays its desktop width.

This is progressive enhancement.

The responsive rule improves the design.

It does not rescue an unusable base email.

Media Queries vs Fluid Email

These techniques work together.

Fluid Email	Media Query
Responds naturally to available width	Applies styles at conditions
Good fallback foundation	Adds responsive refinements
Uses percentages	Uses conditional CSS
Can work without queries	Depends on client support
Useful for containers and images	Useful for stacking and overrides

A strong workflow is:

Fluid first → Media query second

Not:

Fixed layout → Media query must fix everything

Media Queries vs Inline CSS

Inline CSS and media-query CSS also serve different roles.

Inline CSS	Media Query CSS
Critical base styling	Conditional overrides
Attached directly to elements	Stored in <style>
Used widely in email	Depends on query support
Defines default appearance	Changes selected states
Works before responsive enhancement	Often needs !important

For example:

<td
  class="responsive-padding"
  style="padding:40px;"
>

Default:

padding:40px;

Mobile:

@media screen and (max-width:600px) {
  .responsive-padding {
    padding:20px !important;
  }
}

Both layers are important.

Common Media Query Issues

Most email media-query problems come from relying on responsive CSS too heavily, targeting the wrong element, missing !important, or testing only in a browser. Check the base structure and CSS cascade before adding more breakpoints.

The Class Is Missing

CSS:

.mobile-full {
  width:100% !important;
}
But the HTML never uses:

class="mobile-full"

The rule cannot apply.

Inline CSS Wins

You have:

style="width:300px;"

and:

.mobile-full {
  width:100%;
}
Try:

.mobile-full {
  width:100% !important;
}

when the override needs higher priority.

The Wrong Element Is Targeted

Sometimes changing the inner content does not change the outer table width.

Inspect the complete structure.

You may need the responsive class on:

Parent <table>
<td>
Image
Button
Container

Too Many Breakpoints

Avoid:

320px
360px
375px
390px
414px
430px
480px
540px
600px
768px

unless the campaign truly requires those states.

A simpler structure is easier to maintain.

Browser Testing Only

A browser is useful for early development.

It is not an email client.

An HTML file working in Chrome does not prove the same CSS will behave identically inside Gmail or Outlook.

Should You Use Mobile First?

You can build email with either mobile-first or desktop-first responsive logic, but the base version should remain usable across clients. In many email workflows, desktop-first max-width queries are convenient because the desktop design is the default and mobile adjustments are added afterward.

Desktop-first:

@media screen and (max-width:600px) {
  /* Small-screen overrides */
}

Mobile-first might use:

@media screen and (min-width:600px) {
  /* Wide-screen enhancements */
}

Neither syntax is automatically better for every campaign.

Choose the approach that:

Matches your production workflow
Keeps the base HTML robust
Minimizes overrides
Remains understandable to your team

For typical marketing email development, max-width remains straightforward and familiar.

Should You Use Dark-Mode Media Queries?

prefers-color-scheme is also a media query, but its email-client support is different from standard width queries.

For example:

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background:#111111 !important;
  }

  .dark-text {
    color:#ffffff !important;
  }
}

Can I Email currently estimates much lower support for prefers-color-scheme than for general @media.

Therefore, treat dark-mode CSS as a separate enhancement.

Do not assume support for max-width means support for every type of media query.

How to Test Media Queries

Test HTML email media queries in delivered emails across the client and device combinations important to your audience. Start with browser resizing for development, then use real inboxes or email rendering tools for final validation.

A practical process is:

Open the HTML in a browser.
Resize below the breakpoint.
Confirm the query triggers.
Check column stacking.
Check images.
Review typography.
Review padding.
Check buttons.
Send a real test email.
Open it in relevant inboxes.
Check desktop and mobile.
Test with real campaign content.

Do not test only sample content.

A long headline can reveal an issue that a short demo headline hides.

For complete QA, use MailEditor’s guide on how to test email templates across devices.

Media Query QA Checklist

Before shipping the email, confirm:

The base email works without responsive CSS.
The breakpoint matches a real layout need.
Responsive classes exist in the HTML.
Inline styles are overridden where necessary.
Columns stack in the correct order.
Images resize correctly.
Text remains readable.
Mobile spacing is balanced.
CTA buttons remain visible.
Hidden content is nonessential.
Important information remains live text.
Desktop layout still looks correct.
Mobile layout has been reviewed.
Gmail has been tested when relevant.
Outlook has been tested when relevant.
Apple Mail has been tested when relevant.

How MailEditor Fits the Workflow

MailEditor can help you work with responsive HTML email visually while keeping the underlying campaign structure reusable. You can build or import an email, update content and sections, review desktop and mobile layouts, then test the completed campaign.

A practical workflow is:

Build or import the email.
Define the desktop structure.
Keep the HTML base fluid.
Apply responsive behavior.
Update real campaign content.
Preview desktop.
Preview mobile.
Send a test.
Review relevant inboxes.
Export the finished HTML.

You can use the MailEditor HTML email builder for the visual editing stage.

For broader responsive design decisions, use the MailEditor mobile-responsive email design guide.

This article stays focused on the technical media-query layer.

Final Answer

HTML email media queries let you apply responsive CSS when conditions such as viewport width are met.

For most campaigns, use this approach:

Build a fluid base email.
Keep critical styles inline.
Add responsive classes.
Start with a 600px breakpoint.
Stack columns when needed.
Reduce mobile padding.
Resize selected typography.
Make images fluid.
Improve mobile buttons.
Keep important content usable without the query.
Add a 480px breakpoint only when necessary.
Test the delivered email across relevant clients.

A practical starter query is:

@media screen and (max-width:600px) {
  .stack-column {
    display:block !important;
    width:100% !important;
  }

  .mobile-padding {
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .mobile-image {
    width:100% !important;
    height:auto !important;
  }
}

The most important rule is simple:

Build the email so the base version works first. Use media queries to improve the responsive experience rather than making the entire layout depend on them.

If you want to work visually with responsive HTML email, use the MailEditor HTML email builder and test the finished campaign before export.

Frequently Asked Questions

Question: What are HTML email media queries?

Answer: HTML email media queries are conditional CSS rules that change an email’s styling when conditions such as viewport width are met. They are commonly used to stack columns, adjust widths, reduce spacing, resize typography, modify buttons, and improve layouts for smaller screens.

Question: What is the best breakpoint for HTML email?

Answer: 600px is a practical starting breakpoint for many HTML emails because it often aligns with common email container widths. However, the best breakpoint is the width where your specific layout stops working comfortably. Some campaigns also add a narrower 480px adjustment.

Question: Does Gmail support email media queries?

Answer: Yes. Google currently documents Gmail support for standard media queries using features including min-width, max-width, device width, orientation, and resolution. Client context can still affect behavior, so test the delivered email in the Gmail environments relevant to your audience.

Question: Does Outlook support HTML email media queries?

Answer: Outlook exists across several rendering environments, so media-query behavior should not be treated as identical everywhere. Build the base email so it remains readable without the query, then test Classic Outlook, newer Outlook environments, Outlook.com, and mobile versions relevant to your audience.

Question: Should I use max-width or max-device-width?

Answer: Use max-width for most new responsive email layouts. It responds to the available viewport width, which is usually more relevant than the physical device size. W3C now marks device-width media features as deprecated for new CSS and recommends viewport-related features instead.

Question: Do email media queries need !important?

Answer: Often, yes. Email templates commonly use inline CSS for base styling, and inline declarations can take priority over responsive rules. Adding !important to the media-query property allows the conditional style to override the inline value when the query applies.

Question: Can responsive email work without media queries?

Answer: Yes. Fluid and hybrid email layouts can adapt using percentage widths, constrained containers, responsive images, and email-safe structures before any media query runs. Media queries can then enhance spacing, stacking, typography, and other details in clients that support them.

Question: How many breakpoints should an email use?

Answer: Most campaigns do not need many breakpoints. Start with one responsive breakpoint, often around 600px, and add another such as 480px only when a visible layout problem requires it. Fewer responsive states usually make HTML email code easier to test and maintain.

What Are Email Media Queries?

How Do Media Queries Work?

Where Should Media Queries Go?

Why Is !important Common?

What Breakpoint Should You Use?

600px vs 480px

Should You Use 599.98px?

Use Width or Device Width?

Email Client Support

Gmail

Apple Mail

Outlook

Yahoo Mail

Practical Client Rule

Client Support Strategy

Build the Fluid Base

Stack Columns on Mobile

CSS

HTML

Make Images Responsive

Adjust Mobile Spacing

Resize Text on Mobile

Make Buttons Mobile Friendly

Hide Elements Carefully

Change Alignment on Mobile

Use Orientation Queries Carefully

Copy-Ready 600px Media Query

Copy-Ready 480px Query

Complete Copy-Ready Example

What If Media Queries Do Not Run?

Container

Images

Content

Layout

CTA

Media Queries vs Fluid Email

Media Queries vs Inline CSS

Common Media Query Issues

The Class Is Missing

Inline CSS Wins

The Wrong Element Is Targeted

Too Many Breakpoints

Browser Testing Only

Should You Use Mobile First?

Should You Use Dark-Mode Media Queries?

How to Test Media Queries

Media Query QA Checklist

How MailEditor Fits the Workflow

Final Answer

Frequently Asked Questions

Question: What are HTML email media queries?

Question: What is the best breakpoint for HTML email?

Question: Does Gmail support email media queries?

Question: Does Outlook support HTML email media queries?

Question: Should I use max-width or max-device-width?

Question: Do email media queries need !important?

Question: Can responsive email work without media queries?

Question: How many breakpoints should an email use?

Top Email Template Builders & HTML Email Editors for 2026

Best Drag and Drop Email Editors in 2026

Email Signature Size and Image Best Practices

4 Best Unlayer Alternatives to Design Emails

5 Beefree Alternatives to Upgrade Email Design Workflows

Not enough? Order a custom template