HTML email has gap on right on mobile IOS 8
Question
I'm having an issue with this HTML email having a gap on the right side on mobile (IOS 8). This image shows the gap on the right when tested for mobile, iPhone IOS 8.
I've tried/double-checked many things: min-width is 100%, responsive is set to 100% width as well, and I've searched here. The images aren't too wide; they're 600px in width. I tried specifying body width, and I have td align="center". Any additional ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
@media only screen and (max-width:480px) { /* Force iOS Mail to render the email at full width */
body {width:100% !important; min-width:100% !important; min-width:100vw !important;}
}
@media only screen and (max-width: 600px) {
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<!--[if gte mso 9]>
<style>
li {
text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]-->
</head>
<body padding="0" width="100%" min-width="100%" bgcolor="#ffffff"
style="box-sizing: border-box; padding: 0px; margin: 0px; mso-line-
height-rule: exactly;">
<center style="width: 100%; min-width: 100%; background: #ffffff; text-
align: center; display: inline-block;">
<div class="email-container" style="max-width: 600px; margin: 0px
auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0"
cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="max-width: 600px;"
width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" style="word-wrap:normal;"
class=""><a href="#"><img alt="" aria-hidden="true" border="0"
height="290" src="#" title="" valign="middle"></a></td>
</tr>
</tbody>
</table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="text-align: center; max-
width: 600px;" width="100%">
<tbody><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td align="center" class="stack-column-center" style="display:
block; font-family: Arial, Helvetica, sans-serif; font-size: 16px;
line-height: 16px; word-wrap:normal; color:#4e4e4e; text-align: left;
padding: 0px 72px 0px 72px;"><br>
Hello,<br>
<br>
Lorem ipsum.<br>
<br>
Lorem ipsum.<br>
<br>
<span style="font-weight: bold;">To lorem ipsum, please click
below:</span><br>
</td>
</tr>
</tbody>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="margin: auto; text-align:
center; max-width: 600px;">
<tbody>
<tr>
<td align="center" class="button-td" pardot-data="link-
underline:none !important;" style="word-wrap:normal; background:
#ffb81c; text-align: center; text-decoration: none !important;"><a
class="button-a" href="#" style="background: rgb(255, 184, 28); border:
15px solid rgb(255, 184, 28); font-family: Arial, Helvetica, sans-
serif; font-size: 12px; text-align: center; display: block; text-
decoration: none !important;"><span class="button-link"
style="color:#000000; text-transform: uppercase; text-decoration: none !important;"> BUTTON </span></a></td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" class="stack-column-center" style="word-wrap:normal; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; color: #4e4e4e; text-align: left; padding: 0px 72px 0px 72px;" width="100%"><br>
List ipsum:<br>
<ul style="padding: 0px; Margin: 0px 0px 0px 40px;">
<li style="Margin: 10px 0px 10px 0px;">Lorem</li>
<li style="Margin: 10px 0px 0px 0px;">Ipsum</li>
</ul>
<br>
Lorem ipsum.<br>
<br>
Lorem ipsum.<br></td>
</tr>
</tbody>
</table>
<!-- Infographic: Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" class="stack-column-center" style="word-wrap:normal; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; color: #4e4e4e; text-align: left; padding: 0px 72px 0px 72px;" width="100%"><span style="font-weight: bold; color: #002b48;">To lorem ipsum, you will need:</span><br>
<ul style="list-style: none; padding: 0px; Margin: 0px 0px 0px 40px;">
<li style="Margin: 0px 0px 10px 0px;">1. Lorem</li>
<li style="Margin: 10px 0px 10px 0px;">2. Ipsum</li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" style="word-wrap:normal;" class=""><img alt="" aria-hidden="true" border="0" height="305" src="#" title="" valign="middle"></td>
</tr>
</tbody>
</table>
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td bgcolor="#ffffff" height="32" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" border="0" class="x-gmail-data-detectors" style="word-wrap:normal; vertical-align: middle; border-spacing: 0px; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><a href="%%view_online%%"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion></a><br>
<br>
<a href="%%unsubscribe%%" style="display: block; color:#2e2e2e; word-wrap:normal; text-decoration:underline; text-transform: uppercase;">Click here to unsubscribe</a></td>
</tr>
<tr>
<td bgcolor="#ffffff" height="32" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
1 answers
solution1
0 2017-09-18 00:24:31
thanks for using Cerberus ! (I'm the primary author and maintainer. I noticed this is an older version. It should still work, but please know it's been updated significantly :)
Regarding your problem at hand, it seems the issue is the images. There's a style defined for the images in the <head> :
@media only screen and (max-width: 600px) {
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
But this class isn't defined in the images:
<img alt="" aria-hidden="true" border="0" height="290" src="#" title="" valign="middle">
I'm not sure how width these images are natively, but they won't shrink down as-is. On small screens, they'll stay at their native width, even if it breaks the rest of the email :(
Option 1: Adding the class to these images will make the images responsive in email clients that support media queries (which, these days, is most):
<img alt="" aria-hidden="true" border="0" width="600" height="" src="#" title="" valign="middle" class="hero-img">
Option 2: editing the height and width attributes and adding a few inline CSS properties makes the images responsive by default:
<img alt="" aria-hidden="true" border="0" height="290" src="#" title="" valign="middle" style="width: 100%; max-width: 600px; height: auto;">
(No media queries required!)
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
HTML email gap in outlook 2013
Unwanted Gap in HTML Email for Outlook
HTML email background color is not displayed in Gmail/mobile/iOS/dark mode
HTML Email Showing Gap Between Image Slices
Spare gap in html email in Outlook Windows 10
html email on iOS devices
HTML Email : Table overflows on Mobile?
scale html email signature for mobile
1px vertical gap on right of images in simple html signature
Outlook 2007 adding a gap around table in html email
Related Tags