I had perfectly working temlplate with html text navigation that fits the width of my email. It was working just fine, until recent iOS and Android Gmail app updates in December. iOS app now looks the same as the Android app does. It's good that both version looks and works the same way for users, but my html text renders larger now. I believe Android Gmail app on Litmus is not updated. Because I see our email just fine on Litmus as well. I have no-wrap in place to avoid text wrap. As a result, it pushes the email canvas. Rest of the email content centers ok, so it loks acceptable, at least. But It's even much worse on Android that whole email looks misaligned. Is anyone else having the similar font issues? Anybody has a fix? I tried the old/updated gmail font fix but it's not working. Our template is qiute complicated with lots of sections. Navigation Code snippet is below, if anyone interested. I appriciate any feedback I may not be considering, or aware of. Thanks in advance.

G.


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>%%= v(@subjectLine) =%%</title>
<style type="text/css">
body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;}
.ExternalClass { width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass a, .ExternalClass td, .ExternalClass div { line-height: 100%;}
@media only screen and (max-width: 480px) {
    .wrapper { width: 320px !important;}
    .mobile-hidden { display: none;}
    }
</style>
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" id="backgroundTable" style="table-layout:fixed;">
  <tr>
    <td align="center"><table border="0" cellpadding="0" cellspacing="0" width="640" align="center" class="wrapper">
      <tr>
        <td><table border="0" cellpadding="0" cellspacing="0" width="640" style="width:640px;" class="wrapper">
            <tr>
                <td align="center" class="mobile-hidden" bgcolor="#FFFFFF"><table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="640" align="center" nowrap="nowrap" style="min-width: 640px;"><table border="0" cellpadding="0" cellspacing="0" align="center">
                          <tr>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">NEW ARRIVALS&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;WOMEN&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;WOMEN'S PLUS&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;MATERNITY&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;MEN&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;GIRLS&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;BOYS&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;TODDLER&nbsp;&nbsp;&nbsp;/</a></td>
                            <td nowrap="nowrap"><a href="" target="_blank" style="text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; color:#666666;">&nbsp;&nbsp;&nbsp;BABY</a></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>