fivedoor-gists

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e">
          <a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">
          I am a button &rarr;</a></td>
        </tr>
      </table>

fivedoor-gists

<td style="background:url(img-x2.jpg) center/cover;background-image:url(img-x2.jpg); background-size:100%;background-size:cover; background-position: center center" bgcolor="#######" valign="top" height="####" >

<!-- https://litmus.com/community/discussions/4931-using-retina-images-as-background-images?utm_campaign=bestpractices_retinaimages&utm_source=litmusblog&utm_medium=blog#comment-7300 

The reason it's set twice is Gmail will strip background-size but it's happy to have it in shorthand. Android 4.x doesn't like shorthand background so you have to write it all out in longhand. And I've set the background -size twice as cover tends to do a better job but 100% has better support. 

If you have a background set as an HTML attribute (background="img-x1.jpg") you have to use regular sized non-retina images. You can use retina images in VML markup. You just have to set your fill type to frame. What ever image you're using as your fill will stretch to the dimensions of your rectangle. -->

<v:fill type="frame

fivedoor-gists

<style>
/* Media query for displaying content in mobile email clients */
@media only screen and (max-device-width: 480px) { 
   .hide { max-height: none !important; font-size: 12px !important; display: block !important; }
}

/* CSS for hiding content in desktop/webmail clients */
.hide { max-height: 0px; font-size: 0; display: none; }
</style>

fivedoor-gists

<div style="display: none; white-space: nowrap; font: 15px courier; color: #ffffff;">
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
<!-- Throwing this little snippet at the bottom of your email stops Gmail mobile from resizing everything and making it look terrible:-->

fivedoor-gists

<tr>
        <td width="10" height="1" style="line-height:1px;font-size:1px;mso-line-height-rule: exactly;">
        </td>
</tr>
<!-- https://litmus.com/community/discussions/84-what-is-your-favorite-hack#comment-2325-->

fivedoor-gists

   <meta name="x-apple-disable-message-reformatting">
   <!-- Prevent auto-scaling on iOS 11 -->

fivedoor-gists

<!--  
========================== OUTLOOK TARGET NOTES ==========================

The mso number within the conditional tags refers to which Outlook version you are targeting. 
There are other mso numbers to target different versions of Outlook:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12

fivedoor-gists

<style>
/* GMAIL 
======== */
 u + .body .gmail {
    }
/* Target all Gmail and Inbox versions (Webmail, iOS, Android). 
In order to implement this technique your markup must contain
1) A DOCTYPE.
2) A body with a class name (ie. “body”)
3) An element with a class name (ie. “gmail”) 

fivedoor-gists

<style>
/* OWA Outlook.com 
================== */
[owa] .foo {
}
</style>


<!-- Outlook.com and Office365 don’t support attribute selectors in CSS. 
Both webmail apps remove the attribute from the selector, changing its meaning and initial intention.

fivedoor-gists

<style>
/* IOS 10  & IOS 11 
=================== */
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
}
/* We can target iOS with the proprietary property “-webkit-overflow-scrolling” that is only supported on iOS. If we use this in combination with one of the properties supported exclusively in iOS’ most recent webkit versions— #RGBA color notations, for example—we can specifically target iOS 10 and above. 
https://litmus.com/blog/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones 
*/

/* iOS 11.0 & 11.1