Reputation: 481
So I thought I am going to create an Html email in Gmail, it is going to be easy... I have read a few articles about it, when creating email it can only have inline style and nothing in the header. ok.
I open gmail..compose email...enter some random text...select the text...right click on it...inspect...edit html...and paste my html source code into where my random text was. Voila! It looks fine. But when I send the email (or just save it as draft and view it) my inner divs background becomes the background of the outer div as well, it overlaps it.
I have tried to paste the whole source code, I have tried to paste
<body>...</body>
and I have also tried to paste in only code from the most outer div. Why does gmail remove my style?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="color: #FFFFFF; padding:30px;">
<div style="border-radius: 25px; background-image: url(https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80); background-size: cover; background-repeat: no-repeat; background-position: center center; height: 400px; color: #ACA394; text-shadow: 1px 1px #000000; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; width: 100%">
<div style="width: 100%; text-align: center; background-color: rgb(0,0,0,0.5);">
<h1><b>Title</b> Subtitle</h1>
<h2>Some text</h2>
</div>
</div>
</div>
</body>
</html>
Upvotes: 2
Views: 4114
Reputation: 69
Sadly, Gmail doesn't accept all types of CSS. However, this link might be of some help to you. Good luck!
Upvotes: 0
Reputation: 481
The reason why it is because Gmail doesn't support flex
.supported CSS attributes
Upvotes: 1