Pipskweak Pipskweak - 2 months ago 13
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>&nbsp; |&nbsp;
<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&nbsp; |&nbsp; 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/