mjml: 2 columns completely broken on Live Mail, Outlook 2003 and Lotus Notes
E-mail is completely broken when using two columns layout on these e-mail client. I did quite few tests and it seems there really is an issue.
MJML:
<mjml>
<mj-body>
<mj-container background-color="#f0f0f0">
<mj-section padding="0px" background-color="#ffffff">
<mj-column width="50%">
<mj-image src="https://ecomail-accounts.s3-eu-west-1.amazonaws.com/jan/2016/Jun/Wed/1466012577."></mj-image>
</mj-column>
<mj-column width="50%">
<mj-image src="https://ecomail-accounts.s3-eu-west-1.amazonaws.com/jan/2016/Jun/Wed/1466012577."></mj-image>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Generated HTML:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-50,
* [aria-labelledby="mj-column-per-50"] {
width: 50%!important;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
.mj-hero-content {
width: 100% !important;
}
}
</style>
</head>
<body style="background: #f0f0f0;">
<div style="background-color:#f0f0f0;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0 auto;max-width:600px;background:#ffffff;">
<table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:300px;">
<![endif]-->
<div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:250px;"><img alt="" height="auto" src="https://ecomail-accounts.s3-eu-west-1.amazonaws.com/jan/2016/Jun/Wed/1466012577." style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="250"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:300px;">
<![endif]-->
<div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:250px;"><img alt="" height="auto" src="https://ecomail-accounts.s3-eu-west-1.amazonaws.com/jan/2016/Jun/Wed/1466012577." style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="250"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</div>
</body>
</html>
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 18 (6 by maintainers)
Progress in outlook.com though, it’s a start
On 12 Sep 2016 21:05, “Maxime Brazeilles” notifications@github.com wrote:
@iRyusa I have a solution. Replacing
width:100%withmin-width:100%works well as this gets ignored by desktop Outlook.See here: https://www.emailonacid.com/app/acidtest/display/summary/W0H5VPu6THI3ThH28FRozjCP2OvHpQnifWL2CYnhd1mJY/shared
Pretty easy, right?