title: Why does a large white space appear in two column email signature in iPhone 6s, 7, and 8 between the image and the contact info?
body: <p>I'm trying to make a gmail signature. When I run the code through Litmus, it shows there is a large gap on iphone 6s, 7 and 8 between the image and the contact info on the right. How do I correct the layout in this email client? It appears right in every other client tested. Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Kendra Doss HTML Signature&lt;/title&gt;
      
   &lt;style type="text/css"&gt;
           /* Client-Specific styles */
           #outlook a   { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
           body     { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
     
           /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
           .ExternalClass  { width:100%; } /* Force Hotmail to display emails at full width */
           .ExternalClass,
     .ExternalClass p,
     .ExternalClass span,
     .ExternalClass font,
     .ExternalClass td,
     .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
           img     { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
           a img     { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
           p      { margin:0px 0px !important; }
           table     { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
           table td    { border-collapse:collapse; }
      
           /* iPad Styles */
           @media only screen and (max-width: 640px) {
               a[href^="tel"], a[href^="sms"] {
       text-decoration:none;
       color:#000000;
       pointer-events:none;
       cursor:default;
               }
               .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
       text-decoration:default;
       color:#000000 !important;
       pointer-events:auto;
       cursor:default;
               }
           }
           
           /* iPhone Styles */
           @media only screen and (max-width: 380px) {
               a[href^="tel"], a[href^="sms"] {
       text-decoration:none;
       color:#000000;
       pointer-events:none;
       cursor:default;
               }
               .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
       text-decoration:default;
       color:#000000 !important; 
       pointer-events:auto;
       cursor:default;
               }
           }
     
     /* Responsive styles */
       @media only screen and (max-width: 380px) {
        td[class=wrapper] {
         padding-top:0 !important;
         padding-left:0 !important;
         padding-right:0 !important;
        }
     
     table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
         width:300px !important; 
         height:auto !important;    
        }
     
        td[class=clump] {
         display:block !important;
         padding-left:0 !important;
         padding-right:0 !important;
      width:100% !important;
        }
     
        td[class=aligncenter] {
         width:340px !important; 
         height:auto !important;
         text-align:center !important;
        }
       }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
              &lt;td width="100" valign="top" align="left" class="clump" style="padding:0 0 0px; 0;"&gt;
               &lt;!-- Add your Avatar --&gt;
                  &lt;img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;" /&gt;
              &lt;/td&gt;
              &lt;td valign="top" align="left" class="clump" style="padding:10px 0px 0px 0px;"&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
       &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td td width="240" style="padding:0px 0px 0px 10px;"&gt;
                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                                      &lt;tr&gt;
                                          &lt;!-- Edit your Name or Title --&gt;
                                          &lt;td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; line-height:24px; font-weight:800; text-transform:uppercase; color:#e34346; letter-spacing:1px;"&gt;Kendraa Doss&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;!-- Edit your job title or subtitle --&gt;
                                          &lt;td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;"&gt;UX &amp;amp; Visual Designer&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                             
                              &lt;td style="padding:0 0 0 10px;"&gt;
                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;&lt;td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td width="60%" class="clump"&gt;
                                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                                                      &lt;tbody&gt;
                                                          &lt;tr&gt;
                                                              &lt;td width="25" height="30" valign="middle"&gt;&lt;img src="https://i.imgur.com/ZoPNmPa.png" alt="Phone" border="0" width="18" style="display:block; border:0; outline:none; padding:5px 0 0 0;" /&gt;&lt;/td&gt;
                                                              &lt;!-- Edit your Phone number --&gt;
                                                              &lt;td width="" height="30" valign="middle" align="left" style="padding:5px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"&gt; 719.216.3402&lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/tbody&gt;
                                                  &lt;/table&gt;
                                              &lt;/td&gt;
  
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          
         &lt;tr&gt;
                              &lt;td style="padding:0 0 0 10px;"&gt;
                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                             
                                              
                                              &lt;td width="33%" class="clump"&gt;
                                                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                                                      &lt;tbody&gt;
                                                          &lt;tr&gt;
                                                              &lt;td width="25" height="20" valign="middle"&gt;&lt;img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /&gt;&lt;/td&gt;
                                                              &lt;!-- Edit your website URL --&gt;
                                                              &lt;td width="" height="20" valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"&gt;&lt;a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;"&gt;kendradoss.com&lt;/a&gt;&lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/tbody&gt;
                                                  &lt;/table&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Attached is also screenshots from Litmus of how it appears in iPhone <a href="https://i.stack.imgur.com/L8PCJ.png" rel="nofollow noreferrer">Litmus screenshot</a></p>