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

Has anyone else noticed that line heights in (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

.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 on desktop the emails render perfectly, it is only when viewing 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, 4 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 and we can take a look?

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml">
<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" />

<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; } 


<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">
    <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">
        <td align="left">
        <table cellspacing="0" cellpadding="0" border="0" style="box-sizing:border-box;" align="center">
            <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 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>
        <td align="center">
        <table cellspacing="0" cellpadding="0" border="0" style="box-sizing:border-box;" align="center">
            <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>



Michael Muscat
Mr-Mark, 3 years ago


I've just been doing some testing around this.

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

The longer answer is...
When you send your email to 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 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 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
JohnP JohnP, 3 years ago
Mr-Mark :
<!--[if gte mso 9]>
    Get a  better email client

Where can we get the t-shirt?

zerocents zerocents, 3 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free