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.
Solved! Go to 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!
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!
Worked like a charm! Thank you!