htmloutlookresponsive-designhtml-emailmjml

MJML columns not stacking on mobile?

I've created a very basic 2-column design using the online editor at mjml.io, and I cannot manage to make it stack on mobile.

With the code below, the email looks exactly the same on desktop (Outlook 365 for PC) and on mobile (Outlook for iOS on iPhone 13). The columns are side-by-side, everything is just scaled down on mobile.

Can anyone point out what I forgot?

The 2-columns are side-by-side on both versions. The design is just scaled down on mobile

Here's the code I use:

MJML

<mjml>
    <mj-head>
        <mj-attributes>
            <mj-all font-family="Calibri, Helvetica, Arial, sans-serif" />
            <mj-all font-size="16px" />
        </mj-attributes>
    </mj-head>
    <mj-body>
        <mj-section padding="0" background-color="#eeeeee">      
            <mj-column width="30%" padding="0" background-color="#ccffcc"><mj-text padding="10px">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</mj-text>
            </mj-column>
            <mj-column width="70%" padding="0" background-color="#ffcccc"><mj-text padding="10px">pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block </mj-text>
            </mj-column>
        </mj-section>       
    </mj-body>
</mjml>

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>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    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]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-30 {
        width: 30% !important;
        max-width: 30%;
      }

      .mj-column-per-70 {
        width: 70% !important;
        max-width: 70%;
      }
    }
  </style>
  <style media="screen and (min-width:480px)">
    .moz-text-html .mj-column-per-30 {
      width: 30% !important;
      max-width: 30%;
    }

    .moz-text-html .mj-column-per-70 {
      width: 70% !important;
      max-width: 70%;
    }
  </style>
  <style type="text/css">
  </style>
</head>

<body style="word-spacing:normal;">
  <div style="">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#eeeeee" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#eeeeee;background-color:#eeeeee;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#eeeeee;background-color:#eeeeee;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
              <div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="background-color:#ccffcc;vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px;word-break:break-word;">
                                <div style="font-family:Calibri, Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#000000;">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
              <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="background-color:#ffcccc;vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px;word-break:break-word;">
                                <div style="font-family:Calibri, Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#000000;">pink block pink block pink block pink block pink block pink block pink block pink block pink blockpink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block</div>
                              </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>
Solution

  • As pointed out by @Nathan, the issue is related to Outlook, not the MJML or HTML code. It seems that, even starting from a clean, empty message, and inserting the HTML file, Outlook still adds some stuff that prevents the design from being responsive. Using the same code with Thunderbird works perfectly on desktop and mobile.