Is there a way to fix the HTML email width on Outlook 2016?
I am sending out HTML email, but no matter what I do, no matter adding width to table, tr, td, div and body, the email content take up the full width no matter what. This happens on both Outlook 2016 on all windows 7, 8 and 10. Is there a way I can fix the width of the email on Outlook 2016?
Answer
On every email template, you have to set a table with a width="100%" and style="margin:0 auto", then a td with style="width:600px;" (this is the most used / common width for emails), and then you can put your content.
Here a sample code and a fiddle.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body bgcolor="#fff" style="margin:0px; padding:0px; -webkit-text-size-adjust:none;"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" height="100%" style="margin:0 auto;" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#fafafa" height="100%" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="white" height="50" style="height:50px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="50" style="height:50px;" valign="middle" width="600"><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a href="#" style="color:#000;">Some inline version</a></span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FAB800" height="69" style="height:69px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="69" style="height:69px;" valign="middle" width="600"><img alt="" height="69" src="http://via.placeholder.com/600x69" style="display: block;" width="600" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#fff" height="165" style="height:165px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="165" style="height:165px;" valign="middle" width="600">
<p style="width:90%; font-weight:bold; color:#9f836f; font-size:35px; line-height:1.15; font-family: 'Arial', sans-serif; ">Lorem<br>
<span style="color:#232323; font-size:22px; line-height:1.5; font-family: 'Arial', sans-serif; font-weight:normal;">Ipsum</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#fff" height="413" style="height:413px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="413" style="height:413px;" valign="middle" width="600">
<img alt="" height="413" src="http://via.placeholder.com/600x413" style="display: block;" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>