Fix Outlook 2016 from Breaking Email Layout

No two ways about, just about everything web & email related made by Microsoft was designed by relatives of the devil.

In your standard html image blocks, add width and height to the image tag with the size you want it to be (600, 640, 660, 666 if you design for MS – anything, whatever) just make sure you set it with an actual number, not a percentage.

<img class="full-width" src="/path-to-your-image" alt="Happy gray people looking at devices" width="660" height="auto" style="max-width: 660px; display: block;">

Then in your CSS media queries, add your width 100% percentage and height auto targeting the logical places (hero, callouts, banners).

@media screen and (max-width: 660px){
  .hero img,
  .callout img,
  .non-devil img {
    width: 100%;
  }
}

Microsoft Outlook will ignore the CSS (shocker) and remain intact – and look like a Microsoft Outlook email. Mostly everyone else will pickup on the styles and look good.

Hope this helps. √