In the past week, I've started seeing extra space appear in the right-hand side of my emails. It only happens on a Windows desktop, in any version of Microsoft Outlook. Outlook online, mobile, and any non-Windows device don't have the same issue. Where is this all breaking?
Previews courtesy of Email on Acid previews of the sample code below on various outlook / windows combinations
<style type="text/css"><!--
body {
background-color: #edebec;
}
img[data-runat] { display: inline !important; }
img { max-width: 100%; height: auto; }
table td { border-collapse: collapse; }
td[class="footer"] a { color: #fff; text-decoration: none;}
@media (max-width: 670px) {
/* @media only screen and (max-device-width: 670px) { */
table[class="container1"] { padding: 0; width: 100% !important; }
table[class="container2"] { width: 100% !important; }
td[class="fullWidthImage"] img { width: 100% !important; height: auto !important; }
td[class="halfWidthImage"] img { width: 50% !important; height: auto !important; }
td[class="halfWidthImage"] { padding: 0 60px !important; }
td[class="content"] { padding: 20px 60px;}
td[class="headline"] { padding: 20px 60px;}
}
@media (max-width: 560px) {
/* @media only screen and (max-device-width: 560px) { */
table[class="container1"] { width: 100% !important; padding: 0 !important; }
td[class="bigContainer"] { padding: 5px 0 10px !important; }
table[class="container2"] { width: 100% !important; max-width: none !important; float: none !important; clear: both !important; }
td[class="content"] { padding: 15px 15px 15px 15px !important; }
td[class="headline"] { padding: 15px 10px 5px 15px !important; }
td[class="subhead"] { padding-left: 15px !important; }
td[class="fullWidthImage"] {padding: 0 !important; }
td[class="halfWidthImage"] {padding: 0 15px !important; }
td[class="halfWidthImage"] img { width: 80% !important; height: auto !important;}
table[class="donate"] { clear: both !important; float: none !important; padding: 25px 0 10px !important; width: 100% !important; text-align: center !important; }
td[class="stack"] { padding: 0 !important; width: 100% !important; text-align: center !important; }
a[class="button"] { display: inline-block !important; }
}
--></style>
<table class="container1" style="width: 600px; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="bigContainer"><!--start content-->
<table class="container2" style="width: 100%; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="fullWidthImage" style="padding: 0px; margin: 0px; text-align: center; background-color: #edebec; font-style:italic;"><br /><em>PREHEADER COPY LIVES HERE.<br /><br /></em></td>
</tr>
<tr>
<td class="fullWidthImage" style="padding: 0; margin: 0;"><!--insert hero image here. be sure to use an absolute URL-->
<a href="www.stackoverflow.com"><img style="max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;" src="https://via.placeholder.com/600x118.png" border="0" alt="" width="600" height="118" align="center" />
</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 100%; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td height="20"> </td>
</tr>
<tr><!--insert text content here. if updating font styles, be sure to update in td tag all p tags and a tags-->
<td class="content" style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; padding: 0px 40px 0px 40px;" align="left">
<p style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; margin-bottom: 8px;">
<span style="font-size: 120%;">Dear Friends,
</span>
</p>
<p style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; margin-bottom: 8px;">
<span style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Dui faucibus in ornare quam viverra orci sagittis eu. Eu mi bibendum neque egestas congue. Amet volutpat consequat mauris nunc. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Cursus risus at ultrices mi. Lorem sed risus ultricies tristique nulla aliquet. Accumsan in nisl nisi scelerisque. Ut lectus arcu bibendum at varius vel pharetra. A erat nam at lectus.<br>
</span>
</p>
<p style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; margin-bottom: 8px; text-align: center;"><span style="font-size: 120%;"><a href="www.stackoverflow.com" target="_blank"><img src="https://via.placeholder.com/600x1039.jpg?text=a+big+beautiful+infographic" border="0" alt="An infographic" width="600" height="1039" align="center" /></a><br /></span></p>
<p style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; margin-bottom: 8px;"><span style="font-size:120%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Dui faucibus in ornare quam viverra orci sagittis eu. Eu mi bibendum neque egestas congue. Amet volutpat consequat mauris nunc. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Cursus risus at ultrices mi.<br><br>Lorem sed risus ultricies tristique nulla aliquet. Accumsan in nisl nisi scelerisque. Ut lectus arcu bibendum at varius vel pharetra. A erat nam at lectus.
</span>
</p>
<p style="font-family: Verdana, sans-serif; font-size: 12px; color: #000000; line-height: 18px; margin-bottom: 8px;"><span style="font-size: 120%;"><br />Sincerely,<br /></span><span style="font-size: 120%;">Rick Astley</span></p>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
</tbody>
</table>
<!--end content--> <!--start footer-->
<table class="container2" style="width: 600px; background-color: #d3d3d3;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="content footer" style="padding: 15px 0px 10px 0px;" align="center" valign="top">
<p style="font-family: Verdana, Arial, sans-serif; color: #000000; font-size: 11px; line-height: 16px; margin-top: 0px; padding-top: 0px; margin-bottom: 15px;"><strong>Company Footer</strong><br /> <a style="text-decoration: none;">Company Address</a></p>
<p style="font-family: Verdana, Arial, sans-serif; color: #000000; font-size: 11px; line-height: 16px; margin-top: 0px; padding-top: 0px;">Links to CANSPAM and Privacy policies</p>
</td>
</tr>
</tbody>
</table>
<!--end footer--></td>
</tr>
</tbody>
</table>
You have set your email at 600px wide. The first image is okay: 600px with no padding. The second image is problematic: 600px within a 40px padding (left and right). Outlook is making the email 680px wide, pushing the rest of it out.
Instead of this line, within the 40px padding part:
<img src="https://via.placeholder.com/600x1039.jpg?text=a+big+beautiful+infographic" border="0" alt="An infographic" width="600" height="1039" align="center" />
Change to:
<img src="https://via.placeholder.com/600x1039.jpg?text=a+big+beautiful+infographic" border="0" alt="An infographic" width="520" height="900" style="width:100%;height:auto;" align="center" />
Outlook desktop (Windows) will look at the width attribute (520), and all others will prioritise the inline style (100%) - making it responsive.