Formatting Issue with Google Phones

[kenmckown]

I added a table to a Marketo email and it broke the layout of mobile emails on Google Phone.

It is adding these gray boxes on either side.

This was the code I added to a text block:

<div>
<table width="585" align="center" style="border: 1px solid; border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><center><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;"><strong>Paper Inspection Forms</strong></span></center></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><center><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;"><strong>AutoServe1 Digital Vehicle Inspection</strong></span></center></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Time-consuming. Filing systems make reports difficult to retrieve.</span></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Time-consuming. Filing systems make reports difficult to retrieve.</span></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Messy handwriting, grease, and dirt can make reports look unprofessional.</span></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Clean and legible. No grease or dirt from the shop. No handwritten scribbles.</span></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Techs can cheat and "pencil whip" forms to save themselves time.</span></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Techs must inspect every item, every time, resulting in more thorough reports.</span></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Customers must come in to view paper forms or have them read over the phone.</span></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Inspection reports can be viewed anywhere right away on a phone or computer.</span></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Unable to include photos. Everything is written out and may need verbal explanation.</span></td>
<td style="padding: 10px; vertical-align: top; border: 1px solid; border-collapse: collapse;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #666666;">Photos, videos, and educational content help the customer become better informed.</span></td>
</tr>
</tbody>
</table>
</div>

If I remove this block it works fine. It works fine in other mobile clients. Works fine in desktop, but breaks in various Google phones. Not sure what the issue is.

[Arturo_Olivares · Accepted solution]

Hi @kenmckown,

you can try using percentage values (%) instead of px, for example:

Original:

<table width="585" align="center" style="border: 1px solid; border-collapse: collapse;">

Suggestion:

<table width="100%" align="center" style="border: 1px solid; border-collapse: collapse;">

Let us know if that works,

Regards!

[kenmckown]

Worked like a charm! Thank you!