I create mail template in my job. I remember that Gmail started support css styles in 'head' tag. (spec.: https://developers.google.com/gmail/design/css)
I tried it and was disappointed. My letter is big because has a lot of data and Gmail cut off it and shown link for see full letter ([Message clipped] View entire message). My css style was applied to markup. But when I look at full letter by link I do not see styles - they are not applied.
Screenshot of problem
I need help. I think it's bug.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"/>
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
/*
====================================================
== [START] == Reset styles
====================================================
*/
#email_body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
color: #333;
line-height: 120%;
}
#email_body table, #email_body td, #email_body div, #email_body p, #email_body a {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
#email_body table {
border-collapse: collapse;
border-spacing: 0;
}
#email_body table, #email_body td {
margin: 0;
padding: 0;
}
#email_body img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
#email_body p {
margin: 0;
}
#email_body strong, #email_body b {
font-weight: 700;
font-style: inherit;
}
#email_body i, #email_body em {
font-style: italic;
font-weight: inherit;
}
#email_body #outlook a {
padding: 0;
}
#email_body .ReadMsgBody, #email_body .ExternalClass {
width: 100%;
}
#email_body .ExternalClass, #email_body .ExternalClass p, #email_body .ExternalClass span, #email_body .ExternalClass font, #email_body .ExternalClass td, #email_body .ExternalClass div {
line-height: 100%;
}
/*
====================================================
== [START] == Hot Rules
====================================================
*/
#email_body .pb-5{padding-top: 5px !important;}
#email_body .pb-10{padding-top: 10px !important;}
#email_body .pt-10{padding-top: 10px !important;}
#email_body .fs-12{font-size:12px !important;}
#email_body .fs-16{font-size:16px !important;}
#email_body .fw-n{font-weight: 400 !important;}
#email_body .fw-b{font-weight: 700 !important;}
#email_body .wo-u{text-decoration: none !important;}
#email_body .t-regular{color:#333 !important;}
#email_body .t-additional{color: #999 !important;}
#email_body .t-red{color: #cc373c !important;}
/*Gmail anti-munged*/
.content_wrap table.anti-munged {
width: 100% !important;
}
/*
====================================================
== [START] == Skeleton
====================================================
*/
#email_body .content_wrap {
background-color: #fff;
color: #333;
font-family: Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
font-size: 14px;
line-height: 120%;
}
#email_body .content_wrap table,
#email_body .content_table {
font-family: Arial, Helvetica, sans-serif;
}
/*
====================================================
== [START] == Line Data Table
====================================================
*/
#email_body .blueHeader {
font-size: 16px;
color:#37809f;
font-weight: 700;
}
#email_body .lineDataTable {
border-bottom: 1px solid #ccc;
}
#email_body .lineDataTable.ldt-7-11 td {
padding: 7px 0 11px 10px;
}
#email_body .lineDataTable tr > td:first-child {
padding-left: 0;
}
#email_body .lineDataTable td {
border-top: 1px solid #ccc;
}
</style>
</head>
<body id="email_body">
<table class="content_wrap" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr>
<td align="center" valign="top" style="padding:20px 0;">
<table class="content_table" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;max-width:600px;" id="contentTable">
<tr class="applyExtraSpaceBefore">
<td align="left" valign="top" class="blueHeader pb-5 pt-10">
Top Movers
</td>
</tr>
<tr class="extraSpaceAfter-30">
<td align="left" valign="top" class="pb-10 fs-16">
<table align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;" class="lineDataTable ldt-7-11 anti-munged">
<tr>
<td align="left" valign="top">
<a href="#" target="_blank" class="wo-u t-regular">Stas (9123)</a>
</td>
<td align="left" valign="top" width="155" style="width:155px;">
<a href="#" target="_blank" class="wo-u fw-b t-red">100<br><span class="fs-12 fw-b t-additional">09/02/2017</span>
</a>
</td>
<td align="right" valign="top" width="70" style="width:70px;">
<a href="#" target="_blank" class="wo-u t-regular fw-b">
+900%<br><span class="fs-12 fw-n">Prior Value</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>For achieve situation when Gmail is clipping mail - you can add into template any data (for example this big data table) http://img.mtrc.in/mkBi
Its not a bug, its a feature (sort of) that Gmail had introduced some time ago. Any email sent to Gmail if its above 102kb in size the clipping will occur. Since your emails are clipping the email size must be above 102kb. Try any of the following:
You can read more about it here. if you had posted your code in someone would have given you pointers in fixing things.
Hope that is the answer you were looking for.