Fix Outlook 2016 from Breaking Email Layout

CR Rollyson
1 min readOct 29, 2024

--

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. √

--

--

CR Rollyson
CR Rollyson

Written by CR Rollyson

UX & Web mgr for a S&P 500 Fintech & COO of Side Role, a marketing team partnering w In-house Teams & Agencies, Non-profits, & Start-Ups. https://siderole.com

No responses yet