Menu
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 ?
705
Gmail and Outlook.com also filter every properties related to Flexbox, except the property display:flex .
flexbox isn't supported by all email clients. It displays, it can work, see below for an explanation, but not the way you may expect. I ran your sample code as-is using Zurb Foundation for Email template 1.05. I did not add any flexbox CSS.
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:
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
