I haven't had this issue before and it's throwing me. I have a table row with a logo and social media icons. It's rendering fine on almost everything but iPhone according to Email on Acid. Any help would be appreciated.
Email is 640px wide but on iPhone, it's going well past the 640. I've double-checked the image width to make sure it wasn't being pushed over. And although this isn't text, I do have -webkit-text-size-adjust: none; in my style.
Here is the code for the row:
<table align="center" bgcolor="#00263a" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:640px; mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed;" width="100%">
<tr>
<td align="left" bgcolor="#00263A" style="background-color: #00263a;">
<table width="640" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="389" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/index_05.jpg" alt="" style="display: block;" width="389"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="34" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a href="https://www.facebook.com/columbiabank?utm_medium=email&utm_source=giovatto&utm_campaign=Yield_Plus_checking_jul2022" style="text-decoration: none;" alt="Facebook" target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/22CB07_YP_Email_04-06.jpg" style="display: block;" width="34"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="39" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a href="https://www.instagram.com/columbia.bank?utm_medium=email&utm_source=giovatto&utm_campaign=Yield_Plus_checking_jul2022" style="text-decoration: none;" alt="Instagram" target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/22CB07_YP_Email_05.jpg" alt="" style="display: block;" width="39"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="37" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a href="https://twitter.com/columbiabank?utm_medium=email&utm_source=giovatto&utm_campaign=Yield_Plus_checking_jul2022" style="text-decoration: none;" alt="Twitter" target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/22CB07_YP_Email_06.jpg" alt="" style="display: block;" width="37"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="35" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a href="https://www.linkedin.com/company/columbia-bank-new-jersey?utm_medium=email&utm_source=giovatto&utm_campaign=Yield_Plus_checking_jul2022" style="text-decoration: none;" alt="LinkedIn" target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/22CB07_YP_Email_07.jpg" alt="" style="display: block;" width="35"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="66" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 0px;"><a href="https://www.youtube.com/channel/UCbmgXYnNMpGwSt1Ugt4402Q?utm_medium=email&utm_source=giovatto&utm_campaign=Yield_Plus_checking_jul2022" style="text-decoration: none;" alt="YouTube" target="_blank"><img src="https://giopremium.com/ColumbiaBank/07-01-22-yield/images/22CB07_YP_Email_08.jpg" alt="" style="display: block;" width="66"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>CodePudding user response：
Try encapsulating your code with the viewport property helps when there are issues with the responsive design https://www.educba.com/css-viewport/
CodePudding user response：
Changed table settings and it fixed the issue.
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " ><tr><td ><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">