Why Your ChatGPT Email Template Breaks in the Inbox

Your ChatGPT email template looks great in the chat window: neat columns, a big button, your brand colors. Then you send a test, and Outlook stretches the email across the whole screen, Gmail drops the styles, and the logo is a blank space. Sound familiar? It is not ChatGPT’s fault in particular. Claude, Gemini, Copilot and other AI tools make the same mistakes, because they share the same cause.

In this article we look at why an AI-generated HTML email often renders badly in email clients, walk through the typical mistakes with code examples, and show how to turn that HTML into an email that reaches subscribers looking the way you designed it.

Why it happens: AI learned to code on websites

An AI model writes HTML the way it has seen it most often. And most HTML on the internet is websites: millions of pages built by the rules of the modern web, with <div> blocks, flexible grids, styles in a separate file and SVG images. For a browser, that is correct code. The AI faithfully reproduces it in your email too.

But an email client is not a browser. Email lives by its own rules, and they lag years behind the web. Classic Outlook for Windows still renders emails with the Microsoft Word engine, not a browser engine, and Microsoft has promised to support it until at least 2029. Gmail strips out part of your styles. GMX and WEB.DE in Germany and La Poste and SFR in France ignore styles written in a separate block. As a result, the HTML5 and CSS3 that a modern website relies on do not work in email campaigns.

One important detail: a campaign goes out to all your subscribers at once. You do not get to choose who opens it in Gmail and who opens it in Outlook. So if a technique breaks in even one major email client, it does not work for email. That is the yardstick we use for the mistakes below.

Mistake 1. Divs and flexbox, like on a website

This is what an AI-generated email typically looks like: two product cards side by side in a 600-pixel block centered on the page.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

For a website, all of this is right. For an email, nearly every line is a problem. Classic Outlook for Windows does not understand display: flex, so the cards stack on top of each other instead of sitting in a row. It respects max-width only on tables and does not support centering with margin: auto at all, so the email stretches to the full width of the window. Outlook does not know the <main> and <section> tags either, and Gmail swaps some of these tags for its own.

As designed

Blocks Store

As it arrived in Outlook for Windows

Blocks Store

What this means for you: in email, the layout is built with tables, not blocks. It looks old-fashioned, but every client understands tables the same way, including Outlook with its Word engine. Here are the same two cards in email markup:

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

An AI can write code like this if you ask. But by default it chooses website markup, the kind it has seen more often. If you are curious how emails are hand-coded with tables and how frameworks help, take a look at our comparison of email frameworks.

Mistake 2. Styles in a separate block, not in the tags

A website keeps design separate from content: styles are described once in a <style> block or a separate file, and elements refer to them through classes. The AI does the same:

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Many email clients simply throw that block away. Gmail’s mobile web version, GMX, WEB.DE, La Poste and SFR do not read <style> at all. The Gmail app ignores it when the inbox is not a Google account, a work address for example. Gmail on the web accepts styles only in the head of the email, the <head>, and only up to 16 KB. Let the block grow a little larger, and all the design disappears at once. Gmail and Outlook.com do not support linking an external stylesheet with <link> at all.

As designed

Blocks Store

Fall sale

Up to 50% off the whole collection until Sunday.

Shop the sale

As it arrived without the style block

Blocks Store

Fall sale

Up to 50% off the whole collection until Sunday.

Shop the sale

What this means for you: in an email, every design rule is written right in the tag, in the style attribute. These are called inline styles. There is more code, but the styles do not get lost on the way:

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

But do not celebrate this button just yet: it will still break in Outlook for Windows. We explain why in the fourth mistake.

Mistake 3. SVG and base64 images

An AI cannot attach an image file to its answer, so it finds a workaround. It draws the logo and icons right in the code as SVG. And if you gave it a picture, it embeds the image in the HTML as base64, a long string of characters instead of a link to a file:

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

Both work in a browser. Neither works in email. Gmail, Outlook and Yahoo do not show SVG drawn in the code. Gmail turns an SVG file linked as a regular image into a PNG, so it loses its sharpness and animation. Gmail and the new Outlook for Windows do not show base64 images: you get an empty space where they should be.

As designed

Blocks Store

Fall sale

As it arrived in Gmail

Base64 has a second downside: it bloats the email. An image written out as characters takes up roughly a third more space in the code than the file itself. A couple of banners, and the email becomes so heavy that Gmail clips it. More on that in the fifth mistake.

What this means for you: images in an email should live on a server as PNG, JPG or GIF files, and the code should only contain a link to them with their dimensions:

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Mistake 4. Outlook for Windows sees your email through Word

Classic Outlook for Windows deserves a separate conversation. It renders the email not with a browser, but with the engine of the Word text editor. That is why it does not understand much of what any AI considers basic. Here is a typical AI-made first screen of an email, with a background image, a heading over it and a button:

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

In Outlook, all of it breaks at once:

• It does not show a background image set with background-image. The white heading ends up on a white background and disappears.
• Outlook for Windows, Outlook for Mac and Outlook.com do not support the <button> tag in emails.
• Outlook respects padding only in table cells. A button made from a link with padding shrinks down to the size of its text.
• It does not draw border-radius, so the corners come out square.

As designed

Fall sale

Up to 50% off until Sunday

Shop now

As it arrived in Outlook for Windows

Fall sale

Up to 50% off until Sunday

Shop now

What this means for you: emails are coded for Outlook with special techniques. A button is built from a table cell with a background color, and a button like that survives everywhere:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

A background image needs separate code in VML, an outdated markup language that only Outlook understands. AI tools almost never remember it. And a marketer has no reason to learn it.

Mistake 5. A heavy email that Gmail clips

Gmail shows an email in full only if its code weighs less than about 102 KB. Anything that does not fit is hidden behind a “[Message clipped] View entire message” line. It is the code that counts: text, styles, link and image addresses. Images loaded by link do not count toward this size, but base64 images do.

AI tools are wordy. They repeat the same styles on every element, add extra wrappers and comments, and embed images in the code. Clipping hits the most important part: the end of an email usually holds the unsubscribe link and the invisible pixel your email service uses to count opens. A subscriber who wants to unsubscribe will not find the link and may hit “Spam” instead. And opens of that email will not make it into your stats.

What this means for you: keep an eye on the weight of the code. If the email is heavier than 100 KB, it needs trimming: remove repetition, move images to a server, cut what is not needed.

Mistake 6. No preheader

A preheader is the short text an inbox shows next to the subject line. If there is none, the inbox grabs the first text it finds at the top of the email. Usually that is “View in browser”, menu items or the caption under the logo. AI tools almost never add a preheader, because websites have no such element.

What this means for you: the preheader is a second subject line, and it affects whether the email gets opened. It is added as a hidden block at the very start of the code:

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

To learn more about what makes a good email, read our email design guide.

Mistake 7. Scripts, forms and video

On a website it is normal to add interactive parts: a JavaScript slider, a signup form, a video. Out of habit, the AI adds them to emails too. In email, none of this works:

• Email clients do not run scripts and strip them out to protect against malicious code. Some email services will not even let you save an email that contains a script.
• Gmail replaces a <video> tag with an empty stand-in, and Outlook for Windows and Yahoo do not show it. It plays mainly in Apple Mail.
• Forms do not work in Outlook for Windows, Yahoo on iPhone, Proton Mail and GMX, and in Outlook.com and Outlook for Mac the data is not submitted.

What this means for you: instead of a video, an email uses a cover image that links to it, and instead of a form, a button that leads to a page with the form. If you really need interactivity, it takes special techniques, which we covered in our article on animated emails.

How to ask an AI to code an email properly

You can prevent many of these mistakes by explaining the rules of email markup to the AI up front. Here is a prompt you can add to your request:

Code an HTML email for an email campaign, not a web page. Use tables with role=“presentation” for the layout only, with no div grids, flex or grid. The email is 600 pixels wide. Write all styles inline in the style attribute, with no style block and no classes. Do not use the header, main, section, footer or button tags. Images must be PNG or JPG with a full URL, width, height and alt, with no SVG and no base64. Make buttons from a table cell with a background color. No JavaScript, forms or video. Add a hidden preheader at the start of the email. Keep the code under 100 KB.

With a prompt like this, the result gets noticeably better. But let us be honest about what it does not solve.

First, on a long email the AI starts forgetting the rules halfway through. The first blocks are coded with tables, and then <div> and flexbox show up again in the footer. Second, the AI cannot see how the email looks in an inbox. It will confidently write “this code is compatible with all email clients”, but it has no way to check: it has never opened the email in Outlook. And third, you cannot check the code yourself either, unless you code emails for a living. That takes a set of test inboxes in different clients or a paid testing service.

AI is great for planning the structure of an email and writing the copy, as we discuss in our article on AI in email marketing. But the final markup is safer in the hands of a tool that knows the rules of email.

How to turn AI-made markup into a working email

That is what the HTML email converter in Blocks is for. It takes the code the AI wrote and rebuilds it by the rules of email markup. It fixes everything we covered above on its own: it turns blocks and flexbox into tables, moves styles into the tags, and sorts out images, buttons and Outlook.

Here is how it goes:

1. Paste the email code into Blocks or upload the file.
2. Blocks sees that the email was made elsewhere and offers to convert it.
3. The conversion usually takes less than a minute.
4. The email opens in the editor, ready to export to your email service.

There is a second benefit that is easy to overlook. After conversion, the email is no longer a wall of code you are afraid to touch. It opens in the editor as blocks: heading, image, text, button. You can fix any spot by hand, one detail at a time: replace a word, swap an image, recolor a button, all without code and without another request to the AI. And when you export, Blocks again produces code that email clients understand.

If you are not sure an HTML email is worth the trouble at all, compare it with a plain-text one in our article “HTML vs plain text emails”.

In short

• AI models learned to code on websites, so an email template from ChatGPT, Claude or Gemini is built like a web page.
• A campaign goes out to everyone at once. If a technique does not work in even one major email client, it does not work for email.
• The main mistakes: divs and flexbox instead of tables, a separate style block instead of inline styles, SVG and base64 images, techniques Outlook for Windows does not understand, code that is too heavy, no preheader, and scripts, forms and video.
• A detailed prompt helps but does not guarantee the result, and you cannot check the code without testing.
• The reliable way is to run the AI-made markup through a converter and adjust the details by hand in the editor.