Gabi C
Gabi C

Reputation: 481

Why does GMAIL removes inline style from my HTML email?

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?

entered html code saved in draft html code This is my code:

<!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

Answers (2)

Kevin T.
Kevin T.

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

Gabi C
Gabi C

Reputation: 481

The reason why it is because Gmail doesn't support flex.supported CSS attributes

Upvotes: 1

Related Questions