I am creating responsive email templates, I use Thunderbird to send some tests.
In most email clients it works very well. However in Gmail the styles are not applied.
Checking the CSS support I found that gmail only supports <style> inside the <head> tag. MailChimp
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
Knowing this, I implanted my styles inside the head, however, the styles were not applied in GMAIL.
After researching on various forums and breaking my head I couldn't find the solution, so I checked the obvious, it turns out that Thunderbird moves the <style> from <head> to <body>
When I send the template through Thunderbird and see the source of the mail, I get this:
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.7.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="body">
<p>Hi Pierce,</p>
<p class="colored"> This text is blue if the window width is below
500px and red otherwise. </p>
<p>Jerry</p>
</div>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</body>
</html>
When I send the template through mailutils, the behavior is as expected and the styles work correctly in gmail
X-Mailer: mail (GNU Mailutils 3.7)
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
View of gmail:
How to prevent thunderbird from moving the style to the body?
I am using Thunderbird 78.7.1, Ubuntu 20.04.2 LTS
Apparently this strange behavior occurs when the HTML code is inserted from the thunderbird options
To avoid this behavior you must use the plugin ThunderHTMLedit and insert the HTML template from the HTML tab when composing the email