I'm using Thunderbird to send an HTML email to myself. I've tried this via both my Gmail and Zoho Mail accounts, as tests. The result is that Gmail does not display the messages properly. Rather, the only things it does that correspond to the HTML code is making headers larger than normal text, and that's pretty much it. On the other hand, Zoho mail displays everything fine, to the exception of the background colour, but that's another issue.
Here's my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Concert Invitation</title>
</head>
<body style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5; color:#333; background-color:#f5f5f5; margin:0; padding:0" bgcolor="#f5f5f5">
<div class="container" style="max-width:600px; margin:0 auto; padding:20px; background-color:#fff" bgcolor="#ffffff">
<div class="header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px">
<img class="logo" src="logo.png" alt="Logo" style="max-width:150px">
<h1 class="title" style="font-size:24px; font-weight:bold; margin:0">Concert Invitation</h1>
</div>
<img class="picture" src="concert.jpg" alt="Concert" style="max-width:100%; margin-bottom:20px">
<p>Dear [Name],</p>
<p>You are cordially invited to our upcoming concert on [Date] at [Time]. The concert will be held at [Venue] and will feature performances by [Artists].</p>
<p>Please RSVP by [RSVP Date] to reserve your seat. We look forward to seeing you there!</p>
<div class="address" style="margin-top:40px; padding-top:20px; border-top:1px solid #ccc">
<p style="margin:0">123 Main Street</p>
<p style="margin:0">Anytown, USA 12345</p>
<p style="margin:0">(123) 456-7890</p>
<p style="margin:0">info@concert.com</p>
</div>
</div>
</body>
</html>
Does anyone have an idea why this works in Zoho Mail, but not Gmail? The results are the same when sending from either account. The difference occurs accordingly to which account I send the message to.
Gmail doesn't support justify-content:space-between; and align-items:center;. So what you’re seeing in Gmail is your code without those properties.
The good news is you should be able to get the same layout without resorting to these properties. You can set a margin:auto on the <img class="logo"> and <h1 class="title">, and then a margin-left:0; on the former to align it left, and a margin-right:0; on the latter to align it right.
<div class="header" style="display:flex; margin-bottom:20px">
<img class="logo" src="logo.png" alt="Logo" style="margin:auto; margin-left:0; max-width:150px">
<h1 class="title" style="font-size:24px; font-weight:bold; margin:auto; margin-right:0;">Concert Invitation</h1>
</div>
Be aware, though, that not every email client does support display:flex (see https://www.caniemail.com/features/css-display-flex/). For example, if you need to get that exact layout working in The Outlooks for Windows, you will need to use <table>s.