Search code examples
htmlemailtablerow

HTML Email iPhone Table not adjusting


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" class="container" 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" class="esdev-mso-table">
                        
                            <tr>
                                <td valign="top">
                                    <table cellpadding="0" cellspacing="0" class="es-left" 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 class="adapt-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 class="adapt-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 class="adapt-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 class="adapt-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 class="adapt-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 class="adapt-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>


Solution

  • Changed table settings and it fixed the issue.

    <table cellpadding="0" cellspacing="0" width="100%" 
    role="presentation" style="min-width: 100%;"
    class="stylingblock-content-wrapper">
    <tr>
    <td class="stylingblock-content-`wrapper camarker-inner">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">`