Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens

AI Fix-Prompt Generator

Builds a prompt for your AI assistant from the engine's findings: each issue in your email, the clients it affects across all 21, and the fix.

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Example · engine 0.18.22 on the sample above. Paste yours to replace it.

Works in 20 of 21. Outlook Classic scores 79.

0 errors · 39 warnings · 73 notes · 63,678 characters

Paste it into Claude, ChatGPT or your editor's AI: it lists every issue and its fix, so the model doesn't guess.

prompt.md
1379 lines
# Email Compatibility Fix Request

- **Format:** HTML
- **Scope:** 21 email clients
- **Issues found:** 0 errors, 39 warnings, 73 info

## Original Email Code

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    @media (max-width: 600px) { .col { width: 100% !important; } }
  </style>
</head>
<body style="margin: 0; font-family: 'Inter', Arial, sans-serif;">
  <table role="presentation" width="100%" style="background: linear-gradient(#8a7544, #6b5a33);">
    <tr>
      <td style="display: flex; gap: 16px; padding: 24px;">
        <div class="col" style="position: relative;">
          <span style="position: absolute; top: 8px; left: 8px;">New</span>
          <img src="https://example.com/hero.jpg" width="280" alt="Autumn collection">
        </div>
        <div class="col">
          <h1 style="color: #ffffff;">The autumn edit</h1>
          <a href="https://example.com/shop" style="display: inline-block; padding: 12px 24px; border-radius: 6px; background: #ffffff; color: #111111;">Shop now</a>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>
```

## Compatibility Scores

| Client | Score | Errors | Warnings | Info |
|--------|------:|-------:|---------:|-----:|
| Gmail | 91 | 0 | 3 | 3 |
| Gmail Android | 91 | 0 | 3 | 6 |
| Gmail iOS | 91 | 0 | 3 | 5 |
| Outlook 365 | 97 | 0 | 1 | 3 |
| Outlook (New) | 97 | 0 | 1 | 3 |
| Outlook Classic | 79 | 0 | 7 | 10 |
| Outlook iOS | 94 | 0 | 2 | 2 |
| Outlook Android | 97 | 0 | 1 | 3 |
| Outlook for Mac | 97 | 0 | 1 | 4 |
| Apple Mail | 100 | 0 | 0 | 0 |
| Apple Mail iOS | 100 | 0 | 0 | 0 |
| Yahoo Mail | 85 | 0 | 5 | 3 |
| Yahoo Mail Android | 88 | 0 | 4 | 5 |
| Yahoo Mail iOS | 88 | 0 | 4 | 4 |
| Samsung Mail | 100 | 0 | 0 | 5 |
| Thunderbird | 100 | 0 | 0 | 2 |
| HEY Mail | 100 | 0 | 0 | 4 |
| Proton Mail | 100 | 0 | 0 | 4 |
| AOL Mail | 88 | 0 | 4 | 5 |
| Fastmail | 100 | 0 | 0 | 2 |
| Superhuman | 100 | 0 | 0 | 0 |

## Detected Issues

### Warnings

- **linear-gradient** (Outlook 365): Outlook 365 does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Outlook (New)): Outlook (New) does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Outlook Classic): Outlook Classic drops this linear-gradient, and no v:fill covers it.
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td bgcolor="#667eea" width="600" height="200"
    style="background-color: #667eea;
           background-image: linear-gradient(135deg, #667eea, #764ba2);">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
    stroke="false" style="width:600px;height:200px;">
    <v:fill type="gradient" color="#667eea" color2="#764ba2" angle="135" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 40px; color: #fff;">Content here</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>`
- **linear-gradient** (Outlook iOS): Outlook iOS does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Outlook Android): Outlook Android does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Outlook for Mac): Outlook for Mac does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Yahoo Mail): Yahoo Mail does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Yahoo Mail Android): Yahoo Mail Android does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Yahoo Mail iOS): Yahoo Mail iOS does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (AOL Mail): AOL Mail does not support "linear-gradient".
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **display:flex** (Outlook Classic) [STRUCTURAL]: Outlook Classic receives this flex box. The MSO branch needs a table.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use <table> layouts with <!--[if mso]> conditional comments for Outlook's Word engine.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>`
  - After: `<!--[if mso]>
<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0"><tr>
  <td width="50%" valign="top">Column 1</td>
  <td width="50%" valign="top">Column 2</td>
</tr></table>
<![endif]-->
<!--[if !mso]><! -->
<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>
<!-- <![endif]-->`
- **gap** (Outlook Classic) [STRUCTURAL]: Outlook Classic does not support "gap".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use cellpadding/cellspacing on tables, or padding on cells.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Yahoo Mail) [STRUCTURAL]: Yahoo Mail does not support "gap".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Yahoo Mail Android) [STRUCTURAL]: Yahoo Mail Android does not support "gap".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Yahoo Mail iOS) [STRUCTURAL]: Yahoo Mail iOS does not support "gap".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (AOL Mail) [STRUCTURAL]: AOL Mail does not support "gap".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **position** (Gmail) [STRUCTURAL]: Gmail does not support "position".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Gmail Android) [STRUCTURAL]: Gmail Android does not support "position".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Gmail iOS) [STRUCTURAL]: Gmail iOS does not support "position".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Outlook Classic) [STRUCTURAL]: Outlook Classic does not support "position".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Outlook iOS) [STRUCTURAL]: Outlook iOS does not support "position".
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **top** (Gmail): Gmail does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Gmail Android): Gmail Android does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Gmail iOS): Gmail iOS does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Outlook Classic): Outlook Classic does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Yahoo Mail): Yahoo Mail does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Yahoo Mail Android): Yahoo Mail Android does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (Yahoo Mail iOS): Yahoo Mail iOS does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **top** (AOL Mail): AOL Mail does not support "top".
  - Suggestion: "top" is not supported in this email client.
- **left** (Gmail): Gmail does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Gmail Android): Gmail Android does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Gmail iOS): Gmail iOS does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Outlook Classic): Outlook Classic does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Yahoo Mail): Yahoo Mail does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Yahoo Mail Android): Yahoo Mail Android does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (Yahoo Mail iOS): Yahoo Mail iOS does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **left** (AOL Mail): AOL Mail does not support "left".
  - Suggestion: "left" is not supported in this email client.
- **font-family** (Yahoo Mail): Yahoo Mail drops an inline font-family that names a quoted font, like 'Courier New': that text shows in Yahoo's own font instead.
  - Suggestion: Write the font names without quotes (font-family:Courier New,Consolas,monospace), or set the stack in a <style> class, which Yahoo keeps.
- **padding** (Outlook Classic): Outlook Classic drops this padding. Put it on a table cell, or set mso-padding-alt on one.
  - Suggestion: Make it a bulletproof button: a VML <v:roundrect href> sized to the button for Outlook Classic, the <a> for everyone else. arcsize is the radius over half the height (8px on 52px = 31%).
  - Fix:
  - Before: `<a href="https://example.com" style="background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 28px;display:inline-block;text-decoration:none">Open your dashboard</a>`
  - After: `<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:52px;v-text-anchor:middle;width:214px;" arcsize="31%" stroke="f" fillcolor="#1a1a1a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;">Open your dashboard</center></v:roundrect><![endif]-->
<!--[if !mso]><!--><a href="https://example.com" style="background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 28px;display:inline-block"><span style="display:inline-block">Open your dashboard</span></a><!--<![endif]-->`
### Info

Not problems: the email falls back safely where these apply. Do not remove or rewrite code to clear them, and keep responsive (@media) and dark-mode CSS.

- **border-radius** (Outlook Classic) [STRUCTURAL]: Outlook Classic shows these corners square. Keep the radius for every other client; add a v:roundrect only where the rounded shape matters (a pill button, a round avatar).
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Make it a bulletproof button: a VML <v:roundrect href> sized to the button for Outlook Classic, the <a> for everyone else. arcsize is the radius over half the height (8px on 52px = 31%).
  - Fix:
  - Before: `<a href="https://example.com" style="background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 28px;display:inline-block;text-decoration:none">Open your dashboard</a>`
  - After: `<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:52px;v-text-anchor:middle;width:214px;" arcsize="31%" stroke="f" fillcolor="#1a1a1a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;">Open your dashboard</center></v:roundrect><![endif]-->
<!--[if !mso]><!--><a href="https://example.com" style="background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 28px;display:inline-block"><span style="display:inline-block">Open your dashboard</span></a><!--<![endif]-->`
- **<body>** (Outlook for Mac): Outlook for Mac replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<body>** (Yahoo Mail Android): Yahoo Mail Android replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<body>** (Yahoo Mail iOS): Yahoo Mail iOS replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<body>** (Proton Mail): Proton Mail replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<body>** (AOL Mail): AOL Mail replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<body>** (Fastmail): Fastmail replaces <body> with a <div>, dropping the styles set on it. Repeat the background on a full-width wrapper table; keep it on <body> too, as the fallback for the clients that do honour it.
  - Suggestion: `<body>` is not supported in this email client.
- **<style>** (Gmail): Gmail has partial <style> support (head only, with limitations). Inline styles recommended.
  - Suggestion: Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.
  - Fix:
  - Before: `<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>`
  - After: `<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>`
- **<style>** (Gmail Android): Gmail Android has partial <style> support (head only, with limitations). Inline styles recommended.
  - Suggestion: Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.
  - Fix:
  - Before: `<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>`
  - After: `<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>`
- **<style>** (Gmail iOS): Gmail iOS has partial <style> support (head only, with limitations). Inline styles recommended.
  - Suggestion: Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.
  - Fix:
  - Before: `<style>
  .header { background-color: #6d28d9; padding: 32px; }
  .title  { color: #fff; font-size: 24px; }
</style>
<div class="header">
  <h1 class="title">Hello</h1>
</div>`
  - After: `<div style="background-color: #6d28d9; padding: 32px;">
  <h1 style="color: #fff; font-size: 24px;
             font-family: Arial, sans-serif; margin: 0;">
    Hello
  </h1>
</div>`
- **<style>** (Outlook Classic): Outlook Classic has partial <style> support (head only, with limitations). Inline styles recommended.
  - Suggestion: Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.
- **<style>** (Proton Mail): Proton Mail has partial <style> support (head only, with limitations). Inline styles recommended.
  - Suggestion: Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.
- **[role]** (Outlook Classic) [STRUCTURAL]: Outlook Classic ignores the role attribute.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[role]** (Yahoo Mail) [STRUCTURAL]: Yahoo Mail has partial support for the role attribute. Only works on the `<table>` tag.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[role]** (Yahoo Mail Android) [STRUCTURAL]: Yahoo Mail Android has partial support for the role attribute. Only works on the `<table>` tag.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[role]** (Yahoo Mail iOS) [STRUCTURAL]: Yahoo Mail iOS has partial support for the role attribute. Only works on the `<table>` tag.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[role]** (HEY Mail) [STRUCTURAL]: HEY Mail ignores the role attribute.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[role]** (AOL Mail) [STRUCTURAL]: AOL Mail has partial support for the role attribute. Only works on the `<table>` tag.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The role attribute is not supported in this email client.
- **[width]** (Outlook Classic) [STRUCTURAL]: Outlook Classic has partial support for the width attribute. Percentage width on `<img>` elements are based on the physical file's width, not on the parent element's width. Sizes set in attributes don't scale in 120 dpi mode.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The width attribute is not supported in this email client.
- **[width]** (HEY Mail) [STRUCTURAL]: HEY Mail ignores the width attribute.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: The width attribute is not supported in this email client.
- **doctype** (Outlook Classic) [STRUCTURAL]: Outlook Classic ignores the HTML5 doctype. The HTML5 doctype has no impact here.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (Yahoo Mail Android) [STRUCTURAL]: Yahoo Mail Android ignores the HTML5 doctype.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (Samsung Mail) [STRUCTURAL]: Samsung Mail ignores the HTML5 doctype.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (Thunderbird) [STRUCTURAL]: Thunderbird ignores the HTML5 doctype. Renders as if there was no doctype with an Outlook email, and in HTML5 otherwise.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (HEY Mail) [STRUCTURAL]: HEY Mail ignores the HTML5 doctype.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (Proton Mail) [STRUCTURAL]: Proton Mail ignores the HTML5 doctype.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **doctype** (AOL Mail) [STRUCTURAL]: AOL Mail ignores the HTML5 doctype.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: "doctype" is not supported in this email client.
- **@media** (Gmail): Gmail has partial support for "@media". Does not support height based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Gmail Android): Gmail Android has partial support for "@media". Not supported with non Google accounts. Does not support height based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Gmail iOS): Gmail iOS has partial support for "@media". Not supported with non Google accounts. Does not support height based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook 365): Outlook 365 has partial support for "@media". Does not support nested media queries. Nested media queries are removed.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook (New)): Outlook (New) has partial support for "@media". Does not support nested media queries. Nested media queries are removed.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook Classic): Outlook Classic ignores "@media".
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook iOS): Outlook iOS has partial support for "@media". Does not support nested media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook Android): Outlook Android has partial support for "@media". Does not support nested media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Outlook for Mac): Outlook for Mac has partial support for "@media". Does not support nested media queries. Nested media queries are removed.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Yahoo Mail): Yahoo Mail has partial support for "@media". Only supports `screen`, `min-width`, `max-width`, `min-height` and `max-height` based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Yahoo Mail Android): Yahoo Mail Android has partial support for "@media". Only supports `screen`, `min-width`, `max-width`, `min-height` and `max-height` based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Yahoo Mail iOS): Yahoo Mail iOS has partial support for "@media". Only supports `screen`, `min-width`, `max-width`, `min-height` and `max-height` based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Samsung Mail): Samsung Mail has partial support for "@media". Not supported with Hotmail/Outlook accounts.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Thunderbird): Thunderbird ignores "@media".
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (Proton Mail): Proton Mail has partial support for "@media". Does not support landscape media query.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **@media** (AOL Mail): AOL Mail has partial support for "@media". Only supports `screen`, `min-width`, `max-width`, `min-height` and `max-height` based media queries.
  - Suggestion: Design emails mobile-first with a single-column layout that works without media queries.
  - Fix:
  - 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>`
- **background** (Outlook Classic): Outlook Classic has partial support for "background". Only `background-color` values are supported.
  - Suggestion: "background" is not supported in this email client.
- **linear-gradient** (Gmail Android): Gmail Android has partial support for "linear-gradient". Does not work inline in the `background-image` property. (See [email-bugs#135](https://github.com/hteumeuleu/email-bugs/issues/135))
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **linear-gradient** (Samsung Mail): Samsung Mail has partial support for "linear-gradient". Not supported with Hotmail/Outlook accounts.
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
- **display:flex** (Gmail Android) [STRUCTURAL]: Gmail Android has partial support for "display:flex". Not supported with non Google accounts.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use <table> layouts for email client compatibility.
- **display:flex** (Gmail iOS) [STRUCTURAL]: Gmail iOS has partial support for "display:flex". Not supported with non Google accounts.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use <table> layouts for email client compatibility.
- **display** (Gmail Android): Gmail Android has partial support for "display". `flex`, `grid`, `flow-root`, `contents`, `inline flow-root`, `inline flex`, `inline grid`, `initial`, `revert`, `unset` are not supported with non Google accounts.
  - Suggestion: Use tables for layout in email clients.
- **display** (Gmail iOS): Gmail iOS has partial support for "display". `flex`, `grid`, `flow-root`, `contents`, `inline flow-root`, `inline flex`, `inline grid`, `initial`, `revert`, `unset` are not supported with non Google accounts.
  - Suggestion: Use tables for layout in email clients.
- **display** (Outlook Classic): Outlook Classic has partial support for "display". `display:none` does not inherit to inner tables. Only supports `display:none` (but not on `<img>`).
  - Suggestion: Use tables for layout in email clients.
- **gap** (Gmail) [STRUCTURAL]: Gmail has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Gmail Android) [STRUCTURAL]: Gmail Android has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Gmail iOS) [STRUCTURAL]: Gmail iOS has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Outlook 365) [STRUCTURAL]: Outlook 365 has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Outlook (New)) [STRUCTURAL]: Outlook (New) has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Outlook iOS) [STRUCTURAL]: Outlook iOS has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Outlook Android) [STRUCTURAL]: Outlook Android has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Outlook for Mac) [STRUCTURAL]: Outlook for Mac has partial support for "gap". Supports column-gap for flexbox.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **gap** (Fastmail) [STRUCTURAL]: Fastmail has partial support for "gap". Supports gap and column-gap for flexbox. Supports gap for multi-column layout (i.e. in conjunction with CSS column-count property)
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use padding/margin on child elements instead of gap.
  - Fix:
  - Before: `<div style="display: flex; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>`
  - After: `<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>`
- **padding** (Outlook Classic): A fallback this client can see carries this.
  - Suggestion: Outlook ignores padding on <a> tags. Use the MSO font-width trick with &#8202; hair spaces, or use VML. React Email's <Button> handles this automatically.
  - Fix:
  - Before: `<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; display: inline-block;
         text-decoration: none;">
  Click Here
</a>`
  - After: `<!--[if mso]>
<table role="presentation" cellpadding="0" cellspacing="0" border="0"
  style="border-collapse: collapse;">
  <tr>
    <td style="background-color: #6d28d9; padding: 0;
               mso-padding-alt: 12px 32px;">
      <!--[if mso]>
      <i style="letter-spacing: 32px; mso-font-width: -100%;
                mso-text-raise: 18pt;" hidden>&#8202;</i>
      <![endif]-->
      <a href="https://example.com"
        style="background-color: #6d28d9; color: #fff;
               mso-text-raise: 9pt; text-decoration: none;
               font-family: Arial, sans-serif; font-size: 14px;
               font-weight: bold;">Click Here</a>
      <!--[if mso]>
      <i style="letter-spacing: 32px; mso-font-width: -100%;"
         hidden>&#8202;</i>
      <![endif]-->
    </td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><! -->
<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; display: inline-block;
         text-decoration: none;">
  Click Here
</a>
<!-- <![endif]-->`
- **position** (Outlook 365) [STRUCTURAL]: Outlook 365 has partial support for "position". Supports `sticky` but not `relative`, `absolute` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Outlook (New)) [STRUCTURAL]: Outlook (New) has partial support for "position". Supports `sticky` but not `relative`, `absolute` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Outlook Android) [STRUCTURAL]: Outlook Android has partial support for "position". Supports `sticky` but not `relative`, `absolute` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Outlook for Mac) [STRUCTURAL]: Outlook for Mac has partial support for "position". Supports `sticky` but not `relative`, `absolute` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Yahoo Mail) [STRUCTURAL]: Yahoo Mail has partial support for "position". Supports `relative` but not  `absolute`, `sticky` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Yahoo Mail Android) [STRUCTURAL]: Yahoo Mail Android has partial support for "position". Supports `relative` but not  `absolute`, `sticky` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (Yahoo Mail iOS) [STRUCTURAL]: Yahoo Mail iOS has partial support for "position". Supports `relative` but not  `absolute`, `sticky` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (HEY Mail) [STRUCTURAL]: HEY Mail has partial support for "position". Supports `relative` and `sticky` but not `absolute` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **position** (AOL Mail) [STRUCTURAL]: AOL Mail has partial support for "position". Supports `relative` but not  `absolute`, `sticky` and `fixed`.
  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.
  - Suggestion: Use table-based positioning instead of CSS position.
  - Fix:
  - Before: `<div style="position: relative;">
  <div style="position: absolute; top: 0; right: 0;">
    Badge
  </div>
  <p>Content</p>
</div>`
  - After: `<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>`
- **top** (Samsung Mail): Samsung Mail has partial support for "top". Percentages values are not supported.
  - Suggestion: "top" is not supported in this email client.
- **left** (Samsung Mail): Samsung Mail has partial support for "left". Percentages values are not supported.
  - Suggestion: "left" is not supported in this email client.
- **width** (Outlook Classic): Outlook Classic has partial support for "width". Not supported on `<body>`, `<span>`, `<div>`, `<p>` or `<img>` elements.
  - Suggestion: "width" is not supported in this email client.

## Outlook Classic rules

  - Every visual property the author wrote is intended in Outlook Classic too: rebuild it there rather than dropping it.
  - Rounded button: a bulletproof button. <!--[if mso]><v:roundrect href=… style="width:Wpx;height:Hpx;v-text-anchor:middle" arcsize=… fillcolor=… stroke="f"><w:anchorlock/><center style="color:…;font-family:…;font-size:…">Label</center></v:roundrect><![endif]--> then the HTML <a> inside <!--[if !mso]><!-->…<!--<![endif]-->. W and H are the <a>'s rendered size. Put the label in a <span style="display:inline-block">: a link's underline does not reach inside an inline-block, so no client underlines it, including those that strip text-decoration.
  - Rounded picture: <v:roundrect arcsize=… stroke="f" style="width:Wpx;height:Hpx"><v:imagedata src=…/></v:roundrect> in Outlook, the <img> elsewhere. Use v:imagedata, not <v:fill type="frame">: on real Outlook 2016 and 2019 the fill shows only its fallback colour, never the picture. Use the picture's real rendered size (width of its column, height from the file's ratio), and wrap the shape in <div style="font-size:0;line-height:0"> so it does not sit on a text baseline with a gap under it.
  - Picture rounded on some corners only (a card's hero: top corners rounded, bottom square): <v:shape coordsize="W,H" path="m 0,H l 0,r qy r,0 l W-r,0 qx W,r l W,H x e" stroked="f" style="width:Wpx;height:Hpx"><v:imagedata src=…/></v:shape>, with the numbers written out (W, H, r, W-r). A v:roundrect rounds all four corners and cannot do this. Real Outlook 2010 to 2019 clip the picture to the path; 2007 draws it square. Put it flush at the top of its card: when the card's corners are built from corner cells, the hero takes the place of the top corner row, or a band of the card's fill shows above the picture.
  - Rounded container (card, panel): corner cells, never a v:roundrect with a v:textbox around the content. Real Outlook 2016 draws a VML shape at a fixed height and cuts the text past it, mso-fit-shape-to-text or not (a testimonial lost its quote below the stars), and draws no VML inside another shape's text box. Build corner cells in Outlook only: a three-row table of the container's px width (W); top and bottom rows are [corner][edge cell][corner], the middle row is one cell holding the content. Every cell of a corner row has a width attribute, the edge cell W-2r, so they add up to W: with the edge cell's width left out, Word squeezes it and draws the right corner partway along the box. Each corner cell has style="font-size:0;line-height:0;mso-line-height-rule:exactly", or Word makes the row taller than the radius and leaves a gap between corners and box. Each corner is an r×r <v:shape coordsize="r,r" path=…> quarter disc of the fill (top-left: "m 0,r qy r,0 l r,r x e"; top-right: "m 0,0 qx r,r l 0,r x e"; bottom-right: "m r,0 qy 0,r l 0,0 x e"; bottom-left: "m r,r qx 0,0 l r,0 x e"); for a bordered box stroke only the curve with "<fill path> ns e <curve> nf e" and give the edge cells matching borders. Other clients keep their table with background and border-radius, inside <!--[if !mso]><!-->. Keep the fill off any table both branches share: Word would paint it square over the corners. A hero picture that fills the top of the container replaces the top row: draw it as the top-rounded v:shape picture above, with no corner row over it.
  - arcsize is the radius as a fraction of HALF the shape's shorter side: 8px on a 52px-tall button is 31%, 12px on a 268px-tall picture is 9%.
  - Width: Outlook ignores max-width. Wrap the 600px sheet in <!--[if mso]><table width="600" align="center"><tr><td><![endif]-->…<!--[if mso]></td></tr></table><![endif]-->, and give every picture a width attribute no wider than its column.
  - Fonts: for a design set in a web font, add one Outlook-only rule for the elements text sits in, with the stack's own web-safe family: <!--[if mso]><style>td, th, p, a, span, div, li, h1, h2, h3 { font-family: Arial, sans-serif !important; }</style><![endif]-->. Never write it as * { … }: real Outlook 2016 then draws the text in Times New Roman, and so it does for text in a cell with no font of its own, or a stack with system-ui before its web-safe family. Text in another family (a serif web font falling back to Georgia) gets a class and its own Outlook-only rule, and that class goes first in the element's class list: Word reads only the first class.
  - Padding goes on <td>. Padding on a <table> (React Email's <Section>, <Container>) or on a <div> is dropped.
  - Spacing: Word adds adjacent vertical margins where browsers collapse them. Never stack one block's margin-bottom on the next block's margin-top, and count spacer paragraphs inside conditionals as margins.
  - Long URLs and keys: put <wbr> after / ? & = and every ~16 characters. Not &#8203;, which is copied into the URL a reader pastes. word-break and overflow-wrap are dropped by Yahoo, AOL and Gmail.
  - Hidden preheader: display:none plus mso-hide:all.

## Layout & Visual Issues

Client-agnostic rendering bugs. Apply each fix directly to the code.

- **missing-background-fallback**: Gradient has no background-color fallback; it renders as a blank area (and can hide overlaid text) in Outlook and other clients that drop image backgrounds.
  - Add a solid fallback beneath the gradient using its first colour stop.
  - Fix: `background-color: #8a7544;`

## Instructions

Apply all the fixes listed above to the original email code. Return the complete fixed HTML code. Ensure the result is compatible with 21 email clients. Do not remove any content; only modify the CSS and HTML attributes needed to fix the issues.

Prefer to see the issues yourself first? Check CSS support only

The checker needs a computer screen.

What "fix my email" gets wrong, and what this prompt adds

Ask a chat model to fix an email and it can rewrite it the way it would write a web page: flexbox, CSS variables, padding on a div. Those are the things Outlook Classic and Gmail drop, so the "fixed" email can break in new places. The model has no way to know which of your lines fail in which client. This tool runs your HTML through the Emailens engine first and writes what it found into the prompt, so the model edits the lines that fail and leaves the rest.

What the prompt contains

Your original code, then these sections, in this order:

  • Compatibility Scores
  • Detected Issues
  • Outlook Classic rules
  • Layout & Visual Issues
  • Instructions

The scores table gives each client's score out of 100. Each issue names the property, the client, a one-line suggestion and a before and after snippet. The Outlook Classic rules cover what Word's renderer does to fonts, padding and spacing. The instructions tell the model to return the complete HTML and remove no content.

A worked example

The newsletter sample above has a gradient header, a flexbox row and an absolutely positioned badge. Its prompt is about 64 KB of text. This is its first Outlook Classic issue, exactly as the tool writes it:

prompt excerpt
- **linear-gradient** (Outlook Classic): Outlook Classic drops this linear-gradient, and no v:fill covers it.
  - Suggestion: Add a solid background-color fallback before the gradient.
  - Fix:
  - Before: `<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>`
  - After: `<td bgcolor="#667eea" width="600" height="200"
    style="background-color: #667eea;
           background-image: linear-gradient(135deg, #667eea, #764ba2);">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
    stroke="false" style="width:600px;height:200px;">
    <v:fill type="gradient" color="#667eea" color2="#764ba2" angle="135" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 40px; color: #fff;">Content here</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>`

The before and after are the engine's pattern for that issue, not a line copied from your email. The model applies the pattern to your code: here, a solid fallback colour and a VML gradient Outlook Classic can draw.

What it does not do

  • It does not call an AI. You paste the prompt into the assistant you already use.
  • It does not check the model's answer. Paste the returned HTML back into the CSS compatibility checker before you send it.
  • It covers rendering: CSS, HTML and layout. Copy, links and spam signals have their own tools.

Your next question

Other free tools: Subject Line & Preheader Tester · Plain-Text Generator · Gmail Clipping & Size Checker · HTML Email Minifier · Email Link Checker · UTM Link Builder · Accessibility Checker

Run this check on every email

The open-source CLI builds the same kind of prompt and sends it to Claude with your own key: npx @emailens/cli fix email.html (CLI docs).

AI Fix every month, applied for you in the app (Dev). Dev is $9 a month. Share links for your client's sign-off, a test inbox and an API key. See the plans →

Questions

What does this generate?

A structured markdown prompt containing your original email, a per-client compatibility summary, and every CSS issue with its recommended fix. You paste it into an AI assistant and it has everything it needs to rewrite the email correctly, instead of guessing about email-client quirks it doesn't know.

Why not just ask the AI to 'fix my email'?

General models don't reliably know that Outlook ignores flexbox, or that Gmail's apps drop <style> blocks for non-Google accounts. A vague request produces plausible-but-wrong edits. This prompt grounds the model in the specific issues the engine found in your email and their fixes.

Which AI assistants does it work with?

Any of them: Claude, ChatGPT, Gemini, or the AI built into your editor. It's plain markdown, so paste it wherever you work. The more capable the model, the better the rewrite.

Do you send my email to an AI?

No. This tool only analyzes your HTML and builds the prompt text. You choose if and where to paste it. Nothing is sent to any AI provider by us, and your HTML is not stored after the response.