Mjml: Columns displaying as rows in Gmail (among other clients)

[wallawe]

Columns are displaying as rows in Gmail on desktop:

Expected:

They also showed up as columns on outlook.com but that's not nearly as much a concern. Yahoo and AOL performed as expected (using Litmus).

I'm on osx 10.12.3, Chrome 58.0.3. I'm using MJML version 3.3.1. (Also went and tested in Safari and Firefox). Tested both 2 and 3 columns.

I copied this code straight out of one of the prewritten templates after having trouble getting one of ours to work, just as a sanity check. Reduced down to the important part for clarity.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="footer-text" align="center" color="#ffffff" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="15px" padding="0 25px" />
      <mj-link padding="0 35px" font-weight="bold" font-size="12px" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container background-color="#d2eeff">

      <mj-section background-color="#4b525c">
        <mj-column width="33%" vertical-align="top">
          <mj-image src="http://191n.mj.am/img/191n/3s/x09.png" alt="Best companies for your flights" width="30px" padding="10px 25px">
          </mj-image>
          <mj-text mj-class="footer-text">
            <p>
              BEST COMPANIES FOR YOUR FLIGHTS
            </p>
          </mj-text>
        </mj-column>
        <mj-column width="33%">
          <mj-image src="http://191n.mj.am/img/191n/3s/xsw.png" alt="Insurances included" width="29px" padding="10px 25px">
          </mj-image>
          <mj-text mj-class="footer-text">
            <p>
              INSURANCES INCLUDED
            </p>
          </mj-text>
        </mj-column>
        <mj-column width="33%" vertical-align="top">
          <mj-image src="http://191n.mj.am/img/191n/3s/xsx.png" alt="Hotels best selection" width="31px" padding="10px 25px">

          </mj-image>
          <mj-text mj-class="footer-text">
            <p>
              HOTELS BEST SELECTION
            </p>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[ngarnier]

Hello, first, I'd like to give some context: MJML is mobile-first. This means that, by default, without any responsive style, an email coded with MJML has a mobile layout. Then, we're adding responsive styles with the fluid-hybrid method, so the layout can "spread" on desktop viewports. We think this is the best approach (versus desktop-first), mainly for two reasons:

• Support for responsive styles is much better on desktop email clients and webmails (mostly opened on desktop) than on mobile email clients
• In the case an email client doesn't enable support responsive styles, it's more acceptable to show a mobile layout on a desktop than a desktop layout on a mobile (which would be hardly readable and require to zoom in or scroll horizontally)

About Outlook.com: the only way to target this client is to use the [owa] selector. However, OWA doesn't enable to differentiate between their mobile and their desktop client, so we chose to always display the mobile layout (see the second point just above). Since MJML 4, you can force the desktop layout with <mjml owa="desktop">.

About Gmail: Gmail rolled out an update adding support for responsive styles a few months ago. If you're seeing the mobile layout on Gmail, there are two options:

1. The version of Gmail in which the email is read doesn't support responsive styles (see in the Litmus post linked)
2. You're sending the email through a service that alters the HTML and break the styles. You can try using Putsmail (without checking Move my CSS inline when I click Send Email)

In the case of your example, most of users will actually see the email as a desktop layout, with columns side by side.

Now you have the full picture, feel free to comment or ask any remaining question you might have. As we can't do anything about those 2 problems, I will close the issue.

[shauste]

I have the same issue in gsuite. If i open the mailing, the columns are correct. After i clicked „loading images“ the columns break into rows. When i leave the mailing to inbox and go back to it, the columns with images are back. seems like a bug in gmail/gsuite.

[wallawe]

@ngarnier Thanks for you detailed and thorough response. First thing I did was check how it looked when I pasted the same exact HTML into Putsmail, and voila, everything came out perfectly in Gmail. It's unfortunate that Mailchimp is doing whatever it's doing that alters the email but I'm going to look into it and see if there's a fix.

Thanks for all the work y'all do, it's very much appreciated!

@shauste I'd recommend checking by sending from Putsmail as well to make sure your errors don't stem from the same as mine (sending service alters the HTML and break the styles).

[ngarnier]

No worries @wallawe, thanks for the feedback and great to hear you found the cause of the issue. You're actually not the first one to report that Mailchimp messes with the HTML. One user shared on the MJML Slack that it happens only when creating a template in Mailchimp, but not when you create a template and paste the html code directly in the campaign. Maybe you can try this?

[wallawe]

@ngarnier I just wanted to follow up with my findings here for anyone else that comes across this issue with Mailchimp. Your suggestion that it only happens when creating a template is correct. The reason for this (_I think_) is that when you're creating a campaign and paste it there, it defaults to NOT inline styles:

This options doesn't exist when creating a template.

I'm going to check with their support and see if they can shed any further light on this issue.

[ngarnier]

Doesn't the workaround of @wallawe work for you @dubstrike?

[matthewfbenjamin]

I am using Vero and was choosing to include inline-styling, once I unchecked that Gmail and yahoo mail started to work as designed. Thank you @ngarnier

[pauldcollins]

HI @wallawe - I can't see this menu in Mailchimp. I am creating my own custom template and copying the flat HTML in. So I'm guessing that's the reason.

I was wondering, did Mailchimp get back to you and let you know how to use inline styles? Currently I can't get columns to work in Gmail, which is pretty much a deal breaker for my emails!

Thanks for any help

[wallawe]

hey @pauldcollins, it's been awhile since I was working on this so I don't remember what I did for creating custom templates from scratch - but I can tell you I reached out to mailchimp support and they were unable to help much at all.

IIRC, your best bet is gong to be creating a campaign and pasting your custom code in there, unchecking the box as I mentioned instead of just creating a plain template if that makes sense.

[pauldcollins]

Hi @wallawe - thanks for your quick reply.

That does make more sense now, appreciate you clarifying. The bit I missed was that you had to go into the campaign and paste it in directly - I was still trying to create a new template.

Thanks again

[vgrafe]

Just adding here that the "inline css" option is checked by default in braze/appboy. Same solution: unchecking it solves broken responsive emails templates.