https://stackoverflow.com/questions/22819907
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianGmail strips out anything inside style tags, so you need to make sure all your styles are inline.
Here is a CSS Inliner tool tool from Zurb.
trouble with gmail rendering email
Question
<style type="text/css">
@media only screen and (max-width: 480px) {
.secondary img {
width: 100%;
}
}
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200);
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
body {
font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
}
h1 {
font-size: 50px;
font-weight: 200;
color: #FFFFFF;
line-height: 50px;
margin-bottom: 40px;
}
h2 {
font-size: 36px;
font-weight: 200;
color: #444444;
margin-bottom: 30px;
}
h2 strong {
font-weight: 400;
color: #51a33d;
}
h3 {
font-size: 24px;
font-weight: 400;
color: #444444;
}
p {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #AEAEAE;
margin-bottom: 20px;
}
p.light {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #999999;
margin-bottom: 30px;
}
p.quote {
font-size: 24px;
font-weight: 200;
line-height: 30px;
color: #444444;
}
table {
text-align: center;
}
table.wrap {
width: 640px;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.flat-bottom {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
table.block {
width: 250px;
margin: 0 10px;
}
table.btn {
width:260px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.btn a {
width: 250px;
display: block;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
table.single a {
font-size: 24px;
padding: 15px 0;
}
table.double a {
font-size: 18px;
padding: 10px 0;
}
table.green {
background: #51a33d;
}
table.gray {
background-color: #999999;
}
table.orange {
background-color: #F57B20;
}
table img {
margin: 0 auto;
}
a img {
border: none;
}
.main-img {
display: block;
width: 640px;
margin: 0 auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.icon-img {
width: 90px;
height: 90px;
}
.main {
background-color: #444444;
}
.main a {
color: #FFFFFF;
text-decoration: none;
}
.secondary {
background-color: #EEEEEE;
}
.secondary a {
color: #51A33D;
text-decoration: none;
}
.secondary-logo img {
display: inline-block;
margin:0 auto 20px auto;
}
icon img {
display: inline-block;
margin:0 auto;
}
.unsubscribe {
font-size: 14px;
color: #999999;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div style="width:640px; text-align:center; margin: 0 auto;">
<p style="font-size: 14px; margin-bottom: 0px;">Trouble viewing? <a href="[webversion]">View it in your web browser.</a></p>
</div>
<table cellpadding="0" cellspacing="0" class="main wrap flat-bottom">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="60"> </td>
</tr>
<tr>
<td colspan="3">
<a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email"><img src="http://img03.en25.com/EloquaImages/clients/SnagajobcomInc/{33384eb5-e6b0-4030-a8f8-332c77753d99}_logo.png" alt="When I Work" /></a>
</td>
</tr>
<tr>
<td colspan="3" height="30"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h1>Building the Team to Make Scheduling Easier</h1>
<p>Last month we teamed up with When I Work to give our customers an extended free trial of their awesome scheduling software. There was such a great response that we wanted to make sure that you had another chance to easily schedule your employees.</p>
</font>
</td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="110"> </td>
<td>
<table class="" style="width: 320px;">
<tr>
<td valign="middle" height="55"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px; background-color: #f47a20; border: 1px solid #f47a20; padding: 20px; border-radius: 5px;">Schedule My Employees</a></font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="50"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<a href="http://wheniwork.com/watch-video/ "><img src="http://staging.thisclicks.net/email/wiw/v4/images/main-img-phone.jpg" class="main-img" /></a>
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<div class="secondary-logo">
<img src="http://staging.thisclicks.net/email/wiw/v4/images/wiw-logo.jpg" />
</div>
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Employee Scheduling. <strong>Reinvented.</strong></h2>
<p class="light"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email">When I Work</a> is the easiest way for a business to schedule and communicate with its employees using the web, mobile, text messaging, and social media.</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px;">Schedule My Employees</a></font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="3" height="80"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Make Life Easier for You<br />and Your Company</h2>
<p><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email">When I Work</a> is offering an extended free trial to<br />Snagajob customers for a limited time.</p>
<p class="light">Click below to begin receiving applications today!</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px;">Schedule My Employees</a></font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="2" height="60"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<div class="unsubscribe"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">If you are no longer interested you can <unsubscribe>unsubscribe</unsubscribe> instantly.</font></div>
</center>
</body>
</html>
Its working in most of my email clients but looks awful in gmail. Do they not support something I'm doing? I know I had some trouble with gmail and margin in previous emails that we have done. Not really sure how I should reformat it from here?
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
