I have a problem with email layout paddings on mobile version. I think td tag add their padding without permit, and i can’t fix it. Maybe you have ideas guys?
desktop version:
enter image description here
mobile version:
enter image description here
code of these block:
<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 10px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0;">
<tr style="margin:0; padding:0;">
<td class="link-td">
<a class="link" href="#" style="font-size: 11px;color: #08D2FF;font-weight: 600;text-decoration: none;margin: 0;margin-bottom: 5px;padding: 0;">dawcdawdcawdc</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0;">
<tr style="margin:0; padding:0;">
<td class="link-td">
<a class="link" href="#" style="font-size: 11px;color: #08D2FF;font-weight: 600;text-decoration: none;margin: 0;margin-bottom: 5px;padding: 0;">awdcawdcawd</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0;">
<tr style="margin:0; padding:0;">
<td class="link-td">
<a class="link" href="#" style="font-size: 11px;color: #08D2FF;font-weight: 600;text-decoration: none;margin: 0;margin-bottom: 5px;padding: 0;">acdawcdawdcaw</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0;">
<tr style="margin:0; padding:0;">
<td>
<p style="font-size: 11px;color: #08D2FF;font-weight: 600;text-decoration: none;margin: 0;margin-bottom: 5px;padding: 0;">acdawdcawdcw</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have tried give td tag, link class padding: 0; margin:0; line-height: 100%, and that don’t work
>Solution :
Step three of this article suggests that you should be setting padding:0; on your <td> elements, whereas you are only setting this on <tr> and <a>.
And do you really need nested tables? Simplifying your code to use a single table may be helpful as well.