Flex / Grid properties are deleted in gmail email

php css flexbox gmail css-grid

21,183

Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.

In the world of HTML e-mail, embedded and external styles are bad, CSS3 is bad, JavaScript is bad, while.. inline styles and tables for layout are good. In this world, old-school coding methods are alive and well.

It's not surprising that Gmail will strip out CSS3 properties. Your best bet is to stick to tables and inline styles.

UPDATE: Gmail now supports embedded styles.

More information:

21,183

Baptiste Arnaud

Updated on March 20, 2020

Comments

Baptiste Arnaud over 4 years

I have a script in PHP that sends the following HTML by mail :

<html class="no-js" lang="en">
   <body>
      <div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">

        <h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>

        <div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
            <p style="color:white;margin: auto;text-align: center;">{{$notification}}</p>
        </div>

        <a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
      </div>
   </body>
</html>

But the email received (when I inspect the main div) doesn't show the property flex-direction: column;

It seems that gmail filters those properties ?

Is this normal ?