Email CSS

12/30/2019 - 9:04 PM
Gmail does not like the minified version of this. Remove all commented out sections before adding to the template.
This goes between the < head >Here< /head > tags In all emails. This code has been minified. To work with unminified code, pull from builder partial. always minify this version **Dont change the name of the snippet. This will break the silverpop linked files https://api.cacher.io/raw/95aed9217e74014a02ff/7e5892344211925a15bb/Email%20CSS
Email CSS
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 120%; text-decoration: none !important; color:#666666; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
.padding-copy {
padding: 10px 5% 10px 5% !important;
text-align: center;
}
.no-padding {
padding: 0 !important;
}
.section-padding {
padding: 25px 15px 25px 15px !important;
}
/* Desktop fonts */    
.PerksName {
font-size: 12px; font-weight: 500; color: #666666; line-height: 140%;}
.PerksInfo {
font-size: 12px; color: #666666; line-height: 140%;}
.Preheader {
padding:5px; color:#999999; font-size:10px; font-weight:400; text-decoration:none; }
.DividerHeadline {
font-size: 22px; color: #666666; font-weight: 600;}
.social_copy { font-size: 13px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px; padding-bottom: 5px;}
.grid_cta { font-size: 18px; text-decoration: none !important; font-weight: 600; color: #07529e;}
.store_address {font-size:14px; line-height:22px!important;color:#333333;}     
.store_cta { font-size: 18px; text-decoration: none !important; font-weight: 600; color: #ec4d22;}    
.disclaimer { font-size: 11px !important; line-height: 18px !important; color:#666666; padding: 10px 15px 25px 15px; }
.footerlinks {font-size:10px; line-height:18px; text-decoration:none; text-align:center; padding:10px;}
.address {font-size:11px; color:#666666;line-height:14px; padding: 10px 15px 10px 15px;}
.emailpreferences {font-size:11px; color:#666666; padding: 10px 15px 10px 15px; line-height: 20px;}
.preferencesheadline {font-size:18px; line-height:20px; color:#666666; padding-bottom:10px;}     
.spacer { font-size: 1px; min-width: 20px !important; }
.ButtonText {padding: 10px 40px 10px 40px; display: block;text-decoration: none; border:0; text-align: center; font-weight: bold;font-size: 18px; color: #ffffff;background: #07529e;border: 1px solid #07529e; line-height:24px; letter-spacing: 1px;}
.RedButtonText {padding: 10px 40px 10px 40px; display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 18px; line-height:24px; letter-spacing: 1px; color: #ffffff;background: #A80000;border: 1px solid #A80000;}
.GhostButtonText {padding: 10px 40px 10px 40PX; display: block; text-decoration: none;border:2; text-align: center; font-weight: bold;font-size: 18px;color: #FFFFFF; line-height:24px; letter-spacing: 1px;}
.GhostButtonDarkText {padding: 10px 40px 10px 40PX; display: block; text-decoration: none;border:2; text-align: center; font-weight: bold;font-size: 18px;color: #333333; line-height:24px; letter-spacing: 1px;}    
.EditorialHeadline {font-size: 20px; line-height: 24px; color: #07529e; padding: 10px 15px 10px 30px;}
.EditorialSubHeadline {font-size: 16px; line-height: 24px; color: #666666;}
.EditorialTwoColumn {font-size: 16px; line-height: 24px; color: #666666;} 
.BlueCopyScale {font-size: 14px; line-height: 24px !important; padding-top: 10px; padding-left: 15px; padding-bottom: 15px; padding-right: 15px; color: #FFFFFF;}
.SubCopy {font-size: 16px; line-height: 24px !important; padding-top: 10px; padding-bottom: 15px; padding-right: 15px; color: #666666;}    
.StoreGridHeadlines {font-size: 18px; line-height: 20px !important; color: #000000; padding-top: 10px;letter-spacing: .6px; font-weight:900;}     

/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
.logo img {
margin: 0 auto !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
body[yahoo]  table[class="devicewidth"] {width: 400px!important;text-align:center!important;}
body[yahoo]  img[class="bigimage"]{width: 325px !important;}
body[yahoo]  img[class="col2img"] {width: 250px !important; height:250px !important;}
body[yahoo]  img[class="socialimg"] {width: 110px !important; height:110px;}
body[yahoo] .deviceWidth {width:280px !important; padding:0;}
body[yahoo] .TopicImage {width:50px !important; padding:0;}
body[yahoo] .center {text-align: center !important;}
body[yahoo] td[id=desktop] {
display:none !important;
width:0px !important;
overflow:hidden !important;}
body[yahoo] div[class="mobilecontent"]{
display: block !important;
max-height: none !important;}
body[yahoo] td[class="mobilnav"]{ letter-spacing: 1px; font-size: 18px; display: block; width: 100%; border-bottom: 1px solid #F5F4F4; background-color: #2F70A8; padding: 30px;}
body[yahoo] td[class="perksmobilnav"]{ letter-spacing: 1px; font-size: 18px; display: block; width: 100%; border-bottom: 1px solid #F5F4F4; background-color: #2F70A8; padding: 10px;}    
body[yahoo] table[class="responsive-table"]{
width:100%!important;}
body[yahoo] table[class="responsive-table2"]{
width:50%!important;
border:0 !important;}
body[yahoo] table[class="wrapper"]{
width:100% !important;}
body[yahoo] td[class="mobile-hide"]{
display:none !important;}
body[yahoo] div[class="mobilephone"]{font-size: 16px; display: block !important;
max-height: none !important; color:#666666; padding: 15px;display: block; text-decoration: none; border:0; text-align: center; background: #F1F1F1;border: 1px solid #F1F1F1;}
body[yahoo] td[class="mobilephonefooter"]{font-size: 16px; display: block !important; max-height: none !important; color:#666666; padding: 30px;display: block; text-decoration: none; border:0; text-align: center; background: #F1F1F1;border: 1px solid #F1F1F1;}    

/** element related **/
*[class].hideForMobile { width: 0; display:none !important;}    
*[class].hide { display:none !important;}
*[class].blockwrap { display:block !important;}
*[class].center { text-align:center !important;}
*[class].lfloat { float:left !important; }
/** widths mostly footer **/
*[class].w27 {width:27px !important;}
*[class].w15 {width:15px !important;}
*[class].w25 {width:25px !important;}
*[class].w40 {width:40px !important;}
*[class].w100 {width:100px !important;}
*[class].w145 {width:145px !important;}
*[class].w160 {width:160px !important;}
*[class].w190 {width:190px !important;}
*[class].w290 {width:290px !important;}
*[class].w320 {width:320px !important;}
/** Dynamic Widths */
*[class].w319 {width:319.65px !important;}
*[class].w159 {width:159.825px !important;}
*[class].w159 {width:159.4507025761124px !important;}
*[class].w106 {width:106.67px !important;}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important; text-decoration: none !important;
}
/* 2 Equal-Width Columns */
@media only screen and (max-width: 525px) {
td[class="pattern"] table { width: 100%; }
td[class="pattern"] .col:first-child { margin-bottom: 30px; }
td[class="pattern"] .spacer { display: none; }
td[class="pattern"] .col{ width: 100%; display: block;}
td[class="pattern"] .col:first-child { margin-bottom: 0px; }
td[class="pattern"] .hero_image img { width: 100%; height: auto !important; }
*[class].hide { display: none !important; } *[class].block { display: block !important; } *[class].automrgn { margin: 0 auto !important; } *[class].autowdth { width: auto !important; }
*[class].left { text-align: left !important; } *[class].center { text-align: center !important; } *[class].right { text-align: right !important; }
*[class].lfloat { float: left !important; } *[class].rfloat { float: right !important; } *[class].lsnorm { letter-spacing:normal !important; }
*[class].sans_bg { background: none !important; } *[class].abs { position: absolute !important; } *[class].rel { position: relative !important; }
*[class].w380 { width:380px !important; }
*[class].w450 { width:450px !important; }
*[class].w350 { width:350px !important; }
*[class].w340 { width:340px !important; }
*[class].w320 {width:320px !important;}
*[class].w310 { width:310px !important; }
*[class].w270 { width:420px !important; }
*[class].w290 { width:290px !important; }
*[class].w280 { width:280px !important; }
*[class].w230 { width:230px !important; text-align: left; }
*[class].w200 { width:200px !important; }
*[class].w160 { width:160px !important; }
*[class].w150 { width:150px !important; }
*[class].w120 { width:120px !important; }
*[class].SmartPakers205 { width:205px !important; }    
*[class].w115 { width:115px !important; text-align: left; padding-top: 30px; }
*[class].w30 { width:30px !important; }
*[class].h3 {height:3px !important; }
*[class].h5 { height:5px !important; }
*[class].h10 { height:10px !important; }
*[class].h20 { height:20px !important; }
*[class].h120 { height:120px !important; }
*[class].h160 { height:160px !important; }
*[class].h202 { height:202px !important; }
*[class].w85p { width:85% !important; }    
/* Perks Mobile fonts */
.Preheader {
padding:5px; color:#999999; font-size:8px; font-weight:400; text-decoration:none; }    
.PerksName {
font-size: 9px; color: #666666; line-height: 14px;}
.PerksInfo {
font-size: 9px; color: #666666; line-height: 14px;}
.DividerHeadline {
font-size: 18px; letter-spacing: 1px; color: #666666; font-weight: 600;}
.grid_cta { font-size: 15px; text-decoration: none !important; font-weight: 600; color: #07529e;}
.store_cta { font-size: 15px; text-decoration: none !important; font-weight: 600; color: #ec4d22;}    
.GhostButtonDarkText {padding: 10px 40px 10px 40PX; display: block; text-decoration: none;border:2; text-align: center; font-weight: bold;font-size: 15px;color: #333333; line-height:24px; letter-spacing: 1px;}     
.social_copy { font-size: 13px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px; padding-bottom: 5px; }
.disclaimer { font-size: 10px !important; line-height:18px !important; color:#666666; padding: 10px 15px 25px 15px; }
.address {font-size:10px; color:#666666;line-height:14px; padding: 10px 15px 10px 15px;}
.footerlinks {font-size:10px; line-height:18px; text-decoration:none; text-align:center; padding:10px;}
.StoreGridHeadlines {font-size: 15px; line-height: 20px !important; color: #000000; padding-top: 10px;letter-spacing: .6px; font-weight:900;}
     .bigbunny {
      font-size:9px !important;
      line-height:14px !important;} 
/* Fix iPhone borders */
table, td, tr, div, span {
                box-sizing: border-box;
            }
}
</style>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Email CSS
