Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mj-section is full width i OWA #335

Closed
sozedk opened this issue Jul 20, 2016 · 12 comments
Closed

mj-section is full width i OWA #335

sozedk opened this issue Jul 20, 2016 · 12 comments

Comments

@sozedk
Copy link

sozedk commented Jul 20, 2016

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
Copy link
Member

iRyusa commented Jul 20, 2016

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
Copy link
Author

sozedk commented Jul 21, 2016

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.

owa
.

@iRyusa
Copy link
Member

iRyusa commented Jul 21, 2016

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

@sozedk
Copy link
Author

sozedk commented Jul 21, 2016

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

@iRyusa
Copy link
Member

iRyusa commented Aug 10, 2016

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

@sozedk
Copy link
Author

sozedk commented Aug 11, 2016

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

@iRyusa
Copy link
Member

iRyusa commented Aug 26, 2016

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
Copy link
Author

sozedk commented Sep 4, 2016

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
Copy link

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.

screenshot

  <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
Copy link
Member

ngarnier commented Mar 9, 2017

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
Copy link

nargalzius commented Jun 27, 2017

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants