Skip to main content

@media in Proton Mail

UnsupportedProton · webmail

Fix & Workaround

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

Other Clients

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

Related Features

Test your email across all 21 clients

Preview rendering, catch CSS issues, and get actionable fixes. Free.

Try Emailens Free