iOS/Android line-height issue on Outlook.com (mobile browser/app)

Has anyone else noticed that line heights in Outlook.com (mobile browser and native app) are not quite right? It seems like the ExternalClass fix doesn't work here. I don't have the resources right now to investigate myself, so if anyone knows a fix or workaround I'd greatly appreciate it!

FYI: The ExternalClass fix taken from http://htmlemailboilerplate.com/

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.

Just to be clear, when viewing Outlook.com on desktop the emails render perfectly, it is only when viewing Outlook.com on mobile browser or the native mobile app that the line-height issues occur (ie. line heights appear to be 142% their normal size).

paulw paulw, 3 years ago

Hey zerocents,

That is a strange problem! We haven't heard this crop up before. If you can post your code or drop an email to support@campaignmonitor.com and we can take a look?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
zerocents zerocents, 2 years ago

Sure here's a snippet and some litmus snapshots. Thanks.

https://litmus.com/pub/b25c544

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>test</title>

<style type="text/css">
v\:* { behavior: url(#default#VML); display:inline-block}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
}
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

body { -webkit-animation: bugfix infinite 1s; }

a span {
  color: inherit;
}

@-webkit-keyframes bugfix { 
from { padding: 0; } 
to { padding: 0; } 
}

</style>
</head>

<body bgcolor="#f5f5f5" style="padding: 0; margin: 0; width: 100%; -webkit-text-size-adjust: none !important;">
<div style="min-width: 640px">
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="638" height="190" align="center" valign="top">
    
    <div style="line-height: 15px; font-size: 15px;" class="mobile-hide">&nbsp;</div>
    
    <table cellspacing="0" cellpadding="0" border="0" align="center" class="table" style="border-collapse: separate; mso-line-height-rule: exactly">
      <tr>
        <td align="left">
        
        <table cellspacing="0" cellpadding="0" border="0" style="box-sizing:border-box;" align="center">
          <tr>
            <td width="0"><div style="border-bottom: 45px solid #eb0606; border-left: 10px solid transparent; line-height: 0; mso-border-bottom-alt: none">&#8203;</div></td>
            <td style="font-size: 45px; line-height: 45px; color: #ffffff; font-style: italic; white-space: nowrap; font-family: 'Times New Roman', Times, serif;" bgcolor="#eb0606">
              <span class="highlight">CHRISTMAS</span>  <span class="highlight">TREATS</span>
            </td>
            <td width="0"><div style="border-top: 45px solid #eb0606; border-right: 10px solid transparent; line-height: 0; mso-border-top-alt: none">&#8203;</div></td>
          </tr>
        </table>
        
        </td>
      </tr>
      <tr>
        <td align="center">
        
        <table cellspacing="0" cellpadding="0" border="0" style="box-sizing:border-box;" align="center">
          <tr>
            <td style="font-size: 45px; line-height: 45px; color: #eb0606; font-style: italic; white-space: nowrap; font-family: 'Times New Roman', Times, serif; padding-left:5px; padding-right: 5px">
              <span class="small"><span class="mobile-hide">&nbsp;</span>FOR EVERYONE</span>
            </td>
          </tr>
        </table>
        
        </td>
      </tr>
    </table>

    </td>
  </tr>
</table>

</div>
</body>
</html>

Michael Muscat
Mr-Mark, 2 years ago

Hiya,

I've just been doing some testing around this.

The short answer is...
Outlook.com strips out your style block when viewed on mobile.

The longer answer is...
When you send your email to Outlook.com then change all your classes to be prefixed with exc so myclass becomes excmyclass.

They also change your styles and add .ExternalClass so .myclass now becomes .ExternalClass .excmyclass

Outlook.com then wraps your content in a div with the class ExternalClass on it.  However when viewed on mobile this class is missing so none of your styles will work.


To me this looks like a bug in the Outlook.com code, why would they allow styles (and more importantly @media queries) on desktop but not mobile.  I opened this up in firebug and added the class back in and everything worked fine.

Hope that helped explain it, sorry I couldn't resolve your issue. I suppose the only thing to try is set line-height inline on every element.


<!--[if gte mso 9]>
    Get a  better email client
<![endif]-->
JohnP JohnP, 2 years ago
Mr-Mark :
<!--[if gte mso 9]>
    Get a  better email client
<![endif]-->

Where can we get the t-shirt?

zerocents zerocents, 2 years ago

Thanks Mr-Mark looks like I'll be adding line-height to everything from now on. 3 cheers for bloated markup!


Michael Muscat

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098