Skip to main content

@media in Outlook Android

SupportedOutlook Mobile · mobile

Support Details

Design emails mobile-first with a single-column layout that works without media queries.

Before

<table width="800">
  <tr>
    <td width="400">Left Column</td>
    <td width="400">Right Column</td>
  </tr>
</table>
<style>
  @media (max-width: 600px) {
    table { width: 100% !important; }
    td { display: block !important; width: 100% !important; }
  }
</style>

After

<!-- Single-column layout that works without @media -->
<table role="presentation" width="100%"
  style="max-width: 600px;" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding: 16px;">Left Column</td>
  </tr>
  <tr>
    <td style="padding: 16px;">Right Column</td>
  </tr>
</table>

Design mobile-first for clients without media query support

@media is fully supported in Outlook Android. No workarounds needed.

Other Clients

ClientSupport
GmailUnsupported
Gmail AndroidUnsupported
Gmail iOSUnsupported
Outlook 365Supported
Outlook (New)Unsupported
Outlook ClassicUnsupported
Outlook iOSSupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailUnsupported
Samsung MailSupported
ThunderbirdUnsupported
HEY MailSupported
SuperhumanSupported

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free