htmlcssgmailhtml-email
My HTML email looks good on desktop, and iOS Gmail, but not Android Gmail. How do I eliminate the weird whitespace in between <td>?
Really pretty confused here. I have no idea how to inspect elements in the Gmail app on my phone to understand what CSS is/isn't working. The email looks great on my mom's phone, on desktop, at gmail.com ON my android, but not on the gmail app on Android.
Here's the bad display on my phone, followed by one that's correctly displayed:
There was similar whitespace, but vertically, before I added font-size: 0px. No idea why THAT worked.
<html>
<head>
<title>IGS-email (1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="body" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--Including the trackingIme tag will allow your open rates to be tracked for this campaign-->
[[trackingImage]]
<!-- Save for Web Slices (IGS-email (1).psd) -->
<div class="linkWrapper" style="display: flex; justify-content: center;">
<a style="margin: 0 auto;" href="[[viewAsWebpage]]">View as Webpage</a>
</div>
<table id="Table_01" width="800" height="998" border="0" cellpadding="0" cellspacing="0" style="font-size: 0px !important; margin: 0 auto;">
<tr>
<td rowspan="11">
<img src="https://....jpg" width="47" height="907" alt></td>
<td colspan="22">
<img src="https://....jpg" width="706" height="26" alt></td>
<td rowspan="11">
<img src="https://....jpg" width="47" height="907" alt></td>
</tr>
<tr>
<td colspan="4">
<a href="https://.../" target="_blank">
<img src="https://....jpg" width="64" height="16" border="0" alt="aboutpage"></a></td>
<td colspan="3">
<img src="https://....jpg" width="45" height="16" alt></td>
<td colspan="2">
<a href="https://.../" target="_blank">
<img src="https://....jpg" width="95" height="16" border="0" alt="servicespage"></a></td>
<td colspan="3">
<img src="https://....jpg" width="88" height="16" alt></td>
<td colspan="2" rowspan="3">
<a href="https://..." target="_blank">
<img src="https://....jpg" width="119" height="134" border="0" alt="logo"></a></td>
<td colspan="2">
<img src="https://.......jpg" width="98" height="16" alt></td>
<td colspan="2">
<a href="https://.../" target="_blank">
<img src="....jpg" width="117" height="16" border="0" alt="industriespage"></a></td>
<td>
<img src="https://....jpg" width="28" height="16" alt></td>
<td colspan="3">
<a href="https://.../" target="_blank">
<img src="....jpg" width="52" height="16" border="0" alt="jobspage"></a></td>
</tr>
<tr>
<td colspan="12">
<img src="https://....jpg" width="292" height="27" alt></td>
<td colspan="8">
<img src="https://....jpg" width="295" height="27" alt></td>
</tr>
<tr>
<td colspan="12">
<img src="https://....jpg" width="292" height="91" alt></td>
<td colspan="8">
<img src="https://....jpg" width="295" height="91" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="40" height="124" alt></td>
<td colspan="18">
<img src="https://....jpg" width="626" height="124" alt></td>
<td colspan="2">
<img src="https://....jpg" width="40" height="124" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="40" height="492" alt></td>
<td colspan="19">
<img src="https://....jpg" width="627" height="492" alt="emailbody"></td>
<td>
<img src="https://....jpg" width="39" height="492" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="26" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="16" alt></td>
</tr>
<tr>
<td colspan="11" rowspan="3">
<img src="https://....jpg" width="272" height="89" alt></td>
<td colspan="2">
<img src="https://....jpg" width="135" height="15" alt></td>
<td colspan="9" rowspan="3">
<img src="https://....jpg" width="299" height="89" alt></td>
</tr>
<tr>
<td colspan="2">
<a href="https://..." target="_blank">
<img src="https://....jpg" width="135" height="45" border="0" alt="reviewbutton"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="135" height="29" alt></td>
</tr>
<tr>
<td>
<img src="https://....jpg" width="47" height="30" alt></td>
<td colspan="22">
<img src="https://....jpg" width="706" height="30" alt></td>
<td>
<img src="https://....jpg" width="47" height="30" alt></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://....jpg" width="47" height="60" alt></td>
<td>
<a href="https://www.facebook.com/..." target="_blank">
<img src="https://....jpg" width="22" height="30" border="0" alt="facebook-igs"></a></td>
<td colspan="2">
<img src="https://....jpg" width="22" height="30" alt></td>
<td colspan="2">
<a href="https://www.instagram.com/.../" target="_blank">
<img src="https://....jpg" width="29" height="30" border="0" alt="instagram-gs"></a></td>
<td>
<img src="https://....jpg" width="20" height="30" alt></td>
<td colspan="2">
<a href="https://www.linkedin.com/company.../" target="_blank">
<img src="https://....jpg" width="33" height="30" border="0" alt="linkedin-igs"></a></td>
<td colspan="2">
<img src="https://....jpg" width="132" height="30" alt></td>
<td colspan="5">
<a href="https://..." target="_blank">
<img src="https:/....jpg" width="202" height="30" border="0" alt="url"></a></td>
<td colspan="2">
<img src="https://....jpg" width="89" height="30" alt></td>
<td colspan="5">
<img src="https://....jpg" width="157" height="30" alt="phonenumber"></td>
<td rowspan="2">
<img src="https://....jpg" width="47" height="60" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="30" alt></td>
</tr>
<tr>
<td>
<img src="https://....gif" width="47" height="1" alt></td>
<td>
<img src="https://....gif" width="22" height="1" alt></td>
<td>
<img src="https://....gif" width="18" height="1" alt></td>
<td>
<img src="https://....gif" width="4" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="9" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="16" height="1" alt></td>
<td>
<img src="https://....gif" width="17" height="1" alt></td>
<td>
<img src="https://....gif" width="78" height="1" alt></td>
<td>
<img src="https://....gif" width="54" height="1" alt></td>
<td>
<img src="https://....gif" width="14" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="115" height="1" alt></td>
<td>
<img src="https://....gif" width="4" height="1" alt></td>
<td>
<img src="https://....gif" width="49" height="1" alt></td>
<td>
<img src="https://....gif" width="49" height="1" alt></td>
<td>
<img src="https://....gif" width="40" height="1" alt></td>
<td>
<img src="https://....gif" width="77" height="1" alt></td>
<td>
<img src="https://....gif" width="28" height="1" alt></td>
<td>
<img src="https://....gif" width="12" height="1" alt></td>
<td>
<img src="https://....gif" width="1" height="1" alt></td>
<td>
<img src="https://....gif" width="39" height="1" alt></td>
<td>
<img src="https://....gif" width="47" height="1" alt></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Solution
If I open your HTML in Chrome on desktop on macOS, and I zoom in or zoom out, I get the exact same rendering issue as in your screenshot. My guess is the problem is that the Gmail app on your phone is auto-scaling the email to fit the screen, thus giving a similar rendering than what we can see in desktop in Chrome.
My advice would be first to get rid of the giant table with colspan and rowspan and replace this with individual nested tables. You might also try to make more simple slices of images in order to help the auto-scaling. If you manage to make it right in Chrome at different zoom levels, it should be ok on your phone.