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?
Question
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:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Kendra Doss HTML Signature</title> <style type="text/css"> /* 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; } } </style> </head> <body> <table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="100" valign="top" align="left" class="clump" style="padding:0 0 0px; 0;"> <!-- Add your Avatar --> <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;" /> </td> <td valign="top" align="left" class="clump" style="padding:10px 0px 0px 0px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td td width="240" style="padding:0px 0px 0px 10px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tr> <!-- Edit your Name or Title --> <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;">Kendraa Doss</td> </tr> <tr> <!-- Edit your job title or subtitle --> <td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX & Visual Designer</td> </tr> </table> </td> </tr> <tr> <td style="padding:0 0 0 10px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;"> </td></tr> <tr> <td width="60%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="25" height="30" valign="middle"><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;" /></td> <!-- Edit your Phone number --> <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;"> 719.216.3402</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="padding:0 0 0 10px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="33%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td> <!-- Edit your website URL --> <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;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body>
Attached is also screenshots from Litmus of how it appears in iPhone Litmus screenshot
2 answers
solution1
0 2017-10-11 23:35:21
I've found the need to clean the code up a little bit since there is any reference to external plugins. After that I tested your code in IPhone 5, 6, 6plus (can't test it on 7 yet), IPad, and Galaxy S5 and couldn't find any issue.
Here is a modified version of your code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kendra Doss HTML Signature</title>
<head>
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% ; -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 ; }
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 ;
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 ;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
@media only screen and (max-width: 380px) {
td[class=wrapper] {
padding-top:0 ;
padding-left:0 ;
padding-right:0 ;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:300px ;
height:auto ;
}
td[class=clump] {
display:block ;
padding-left:0 ;
padding-right:0 ;
width:100% ;
}
td[class=aligncenter] {
width:340px ;
height:auto ;
text-align:center ;
}
}
</style>
</head>
<body>
<table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view">
<tbody>
<tr>
<td valign="top" align="left" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;">
<!-- Add your Avatar -->
<img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" />
</td>
<td valign="top" align="left" style="padding:10px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td td width="240" style="padding:0px 0px 0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Edit your Name or Title -->
<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;">Kendraa Doss</td>
</tr>
<tr>
<!-- Edit your job title or subtitle -->
<td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX & Visual Designer</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"">
<tbody>
<tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;"> </td></tr>
<tr>
<td width="60%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" height="30" valign="middle"><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;" /></td>
<!-- Edit your Phone number -->
<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;"> 719.216.3402</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 0 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="33%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0"">
<tbody>
<tr>
<td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your website URL -->
<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;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
PS Do not user "!important" if you doesn't mean it. Improper use could overlap styles making problem solving a living hell.
solution2
0 2017-10-11 23:59:59
It might be to do with the width set to 100% in CSS
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
set it to:
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:auto !important;
}
It should fix the spacing issues.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Large White Space Between Footer and Background Image
Why is there a white space between these blocks in an HTML email
Background image will not show on mobile (iPhone 6s)
Why white space between div's?
Does anyone know why does my Contact Us sidebar div link has white space between rounded border and gradient?
why does a space appear in between the links and the container?
Why does white space appear when I remove these elements?
Large white-space between first and second Bootstrap table column
Can anyone tell me what causes that white space appear between the contact form and the footer?
Why is there extra “white space” between these floated Div's in FF and not IE?
Related Tags