Android Question
html email signature not displaying inline css in gmail
So, for my email signature, I'm using custom html with inline css, as recommended for email usage.
This is what the signature is supposed to look like,
red lines are just used to cover my personal details.
mail signature displayed normally
mail signature without styling, both gmail android, gmail web
How do I get gmail to display my signature properly with css?
EDIT: Here is the code
<body style="color: rgb(0, 0, 0); padding: 0; padding-top: 30px; margin: 0; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">
<style>
.signature {
padding-top: 40px;
font-weight: 100;
word-break: all;
}
.vr {
float: left;
border-right: 1px solid black;
height: 138px;
}
.text-container {
overflow: auto;
font-family: sans-serif;
color: black;
padding-top: 0;
text-align: left;
padding-left: 28px;
}
h1 {
margin-left: -2.5px;
font-size: 34px;
margin-top: 0;
margin-bottom: -6px;
font-weight: 100;
}
.subtitle {
font-size: 14px;
}
p {
font-size: 18px;
margin-top: 5px;
margin-bottom: 5px;
}
a {
text-decoration: none;
color: black;
}
.img {
float: left;
padding-right: 10px;
padding-left: 10px;
margin: -38px;
}
.contact-secondary {
display: none;
}
@media only screen and (max-width: 500px) {
.signature {
padding-left: 15px;
}
.img {
float: none;
width: 150px;
margin-bottom: -20px;
margin-top: -30px;
padding: 0;
}
.text-container {
padding-left: 0;
margin-top: -10px;
border: none;
}
.vr {
display: none;
}
}
@media only screen and (max-width: 350px) {
.contact-secondary {
display: inherit;
}
.contact-main {
display: none;
}
.text-container {
padding-left: 0;
border: none;
margin-top: -10px;
}
.vr {
display: none;
}
.signature {
padding-left: 15px;
}
.img {
padding: 0;
}
.foot {
font-size: 12px;
}
}
@media only screen and (max-width: 250px) {
.img {
float: none;
width: 80px;
margin: -20px;
padding: 0;
}
h1 {
font-size: 23px;
padding-bottom: 4px;
padding-left: 1px;
}
.subtitle {
margin-top: -5px;
margin-left: 0px;
margin-bottom: -2px;
font-size: 10px;
}
.signature {
padding-left: 10px;
padding-top: 30px;
}
p {
font-size: 14px;
}
.text-container {
padding-left: 0;
border: none;
margin-top: 5px;
}
.contact-secondary {
display: inherit;
}
.contact-main {
display: none;
}
.vr {
display: none;
}
.foot {
font-size: 9px;
}
}
</style>
<div class="signature"><img class="img" width="200px" src="http://harrypark.io/mail/logo.png" alt="harrypark.io logo">
<div class="vr"></div>
<div class="text-container">
<h1><a href="http://harrypark.io/mail/vcard.vcf">Harry Park</a></h1>
<p class="subtitle">Web Designer + Full Stack Developer</p>
<div class="contact-main">
<p><a href="http://harrypark.io">harrypark.io</a></p>
<p><a href="mailto:MYEMAIL">MYEMAIL</a> |
<a href="tel:MYPHONENUM">MYPHONENUM</a></p>
</div>
<div class="contact-secondary">
<p><a href="http://harrypark.io">harrypark.io</a></p>
<p><a href="mailto:MYEMAIL">MYEMAIL</a></p>
<p><a href="tel:MYPHONENUM">MYPHONENUM</a></p>
</div>
<p class="foot">web design | web development</p>
</div>
</div>
</body>
Sorry for the awkward formatting of code, stackoverflow makes it mighty hard.
Answer
Gmail doesn't support css inside <style> elements, you need to inline the css using style attributes. See: https://www.campaignmonitor.com/css/
This tool might help you: https://templates.mailchimp.com/resources/inline-css/
Source (Stackoverflow)