/* ensure that clients don’t add any padding or spaces around the email design and allow us to style emails for the entire width of the preview pane */
body,
#bodyTable {
height:100% !important;
width:100% !important;
margin:0;
padding:0;
}
/* Ensures Webkit- and Windows-based clients don’t automatically resize the email text. */
body,
table,
td,
p,
a,
li,
blockquote {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
/* Forces Yahoo! to display emails at full width */
.thread-item.expanded .thread-body .body,
.msg-body {
width: 100% !important;
display: block !important;
}
/* Forces Hotmail to display emails at full width */
.ReadMsgBody,
.ExternalClass {
width: 100%;
background-color: #f6f6f6;
}
/* Forces Hotmail to display normal line spacing. */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
/* Resolves webkit padding issue. */
table {
border-spacing:0;
}
/* Resolves the Outlook 2007, 2010, and Gmail td padding issue, and removes spacing around tables that Outlook adds. */
table,
td {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
/* Corrects the way Internet Explorer renders resized images in emails. */
img {
-ms-interpolation-mode: bicubic;
}
/* Ensures images don’t have borders or text-decorations applied to them by default. */
img,
a img {
border:0;
outline:none;
text-decoration:none;
}
/* Styles Yahoo’s auto-sensing link color and border */
.yshortcuts a {
border-bottom: none !important;
}
/* Styles the tel URL scheme */
a[href^=tel],
.mobile_link,
.mobile_link a {
color:#999999 !important;
}
/* Media queries for when the viewport is smaller than the default email width but not too narrow. */
@media screen and (max-device-width: 650px), screen and (max-width: 650px) {
/* Constrain email width for small screens */
table[class=”email-container”] {
width: 100% !important;
}
/* Constrain tables for small screens */
table[class=”fluid”] {
width: 100% !important;
}
/* Force images to resize to full width of their container */
img[class=”fluid”],
img[class=”force-col-center”] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* And center these ones */
img[class=”force-col-center”] {
margin: auto !important;
}
/* Force table cells into rows */
td[class=”force-col”],
td[class=”force-col-center”] {
display: block !important;
width: 100% !important;
clear: both;
}
/* And center these ones */
td[class=”force-col-center”] {
text-align: center !important;
}
}
/* Media queries for when the viewport is narrow. */
/* Rules prefixed with ‘hh-‘ (for ‘handheld’) and repeat much of what’s above, but don’t trigger until the smaller screen width. */
@media screen and (max-device-width: 425px), screen and (max-width: 425px) {
/* Helper only visible on handhelds. All styles are inline along with a `display:none`, which this class overrides */
div[class=”hh-visible”] {
display: block !important;
}
/* Helper only visible on handhelds. All styles are inline, which this class overrides */
td[class=”hh-hide”] {
display: none !important;
}
/* Center stuff */
div[class=”hh-center”] {
text-align: center;
width: 100% !important;
}
/* Constrain tables for small screens */
table[class=”hh-fluid”] {
width: 100% !important;
}
/* Force table cells into rows */
td[class=”hh-force-col”],
td[class=”hh-force-col-center”] {
display: block !important;
width: 100% !important;
clear: both;
}
/* And center these ones */
td[class=”hh-force-col-center”] {
text-align: center !important;
}
/* Force images to resize to full width of their container */
img[class=”hh-fluid”],
img[class=”hh-force-col-center”] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* And center these images */
img[class=”hh-force-col-center”] {
margin: auto !important;
}
}
|