mj-section is full width i OWA

[sozedk]

When using OWA (Outlook Web App) the mj-section is 100% width instead of the default 600px - I can see, that this is not an issue in the mailgun-example but I have not tested to see if e.g. the templates from zurb have the same issue or not. Any idea if this can be solved?

[iRyusa]

Hi there,

They are displayed in a 600px on my outlook account, but in mobile view see #40 for more informations about it

Can you share a screenshot about it please ?

[sozedk]

Hey @iRyusa

I have already read that issue, but as I see it only covers responsive columns, my issue is about the total width of the email. I have attached a screenshot with the result of your Underwater template in OWA in IE11 - the width is 100% (here ~1300px) instead of 600px.

.

[iRyusa]

Oh sorry, I thought OWA was exactly the same as current outlook " https://outlook.live.com/owa/ "

[sozedk]

yup - those who dislike older versions of IE have never tried to make markup for emails. I hope a solution can be found :)

[iRyusa]

@Kila03 I was wondering where did you get this OWA version ?

[sozedk]

@iRyusa It is my work account - guess it is part of Microsoft Office Web Apps in Microsoft Office 365.

[iRyusa]

I don't know what to do about this issue, I didn't find any information about conditionnal comment for this specific outlook version.

[sozedk]

The only solution I have seen is the mailgun example, which, in short, just uses 3 columns instead of only 1. I have not yet seen any disadvantages with this technique, but unfortunately I have not access to e.g. litmus to test it more widely.

[RJRandell79]

Hi, thought I would add this since I have a client which uses OWA webmail (and so does all her customers apparently). It's a bit hacky but the following seems to fix the width to 600px in OWA whilst maintaining the mobile element, be it a little off centre on desktop if you have a 600px full width image. If there is no 600px width, the email width will be one third width of the window. From what kila03 suggests the best approach is a 3 column wrapper table. Thing is with OWA, if you double-click the email it opens a new window where the email is rendered to the 600px width. So many email clients seem to strip out any styles too, but the below got the best results but does require more widespread testing as I don't have access to Litmus.

With the below email, the email content would stretch to fill the width of the window and the banner image would remain at 600px width. The '.container' class has a width of 600px applied to it, under the 480px breakpoint the width is declared as 320px. Feel free to test further.

  <table width="100%" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%;table-layout:fixed;border-collapse:collapse;">
      <tr>
          <td style="max-width:50%;" align="left">
              <span style="opacity:0;color:#666666;"></span>
          </td>
          <td class="container" align="center" style="min-width: 320px; max-width: 600px;">
              <table width="100%" role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
                  <tr>
                      <td width="100%" align="center">
                          <!-- MJML Email content -->
                      </td>
                  </tr>
              </table>
          </td>
          <td style="max-width:50%;" align="right">
              <span style="opacity:0;color:#666666;"></span>
          </td>
    </tr>
</table>

[ngarnier]

Hey @RJRandell79, thanks for investigating this issue and providing feedback!

We'd need more tests to confidently go down this route, no way for you to test in Litmus or Email On Acid? Here's an MJML template you can use for testing: https://mjml.io/try-it-live/ryfYFW1ix

[nargalzius]

Also getting this issue on Outlook desktop (not sure which version but all my office mates that use it show the same issue)

It's interesting to note that this is not the case with the outlook web client (outlook.com) - that renders the mobile fine (with the max width properly honored)

[ngarnier]

Hey, since Outlook.com and OWA are now using the same engine, I don't think this issue is still happening. I ran a test and couldn't reproduce.

I have no idea if this version of OWA is still actually in use, but if it's still the case it is legacy.

Feel free to comment if you can still reproduce.