mj-column width doesn't work on Gmail mobile and desktop when printing

Describe the bug the width property of the mj-column element is ignored on mobile and on desktop when using the Print functionality of Gmail.

To Reproduce Steps to reproduce the behavior:

1. Create a file with this MJML code:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column width="50%" background-color="red">
        <mj-text>Left column</mj-text>
      </mj-column>
      <mj-column width="50%" background-color="orange">
        <mj-text>Right column</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

1. Render it to HTML
2. Send the HTML to a Gmail address
3. Open the mail with Gmail
4. On desktop, use the “Print” functionality on the dropdown of the mail
5. See the error

Expected behavior Columns should be displayed side-by-side :

Observed behavior Columns are displayed over under, with a width of 100%.

MJML environment (please complete the following information):

• OS: Linux
• MJML Version 4.0.5

Email sending environment(for rendering issues):

• SendGrid

Affected email clients (for rendering issues):

• Email Client: Gmail (others untested yet)
• OS: All
• Browser: All

Additional context I tried the solutions given for the following issues but they didn’t do the trick (unless I missed something) :

• https://github.com/mjmlio/mjml/issues/1383
• https://github.com/mjmlio/mjml/issues/1300

[iRyusa]

And you have also Mj-group to keep the same behavior on mobile

On Mon, Dec 3, 2018 at 7:55 PM Maxime Brazeilles < [e-mail]> wrote:

Yep, cf here https://mjml.io/documentation/#mjml-column

On Mon, Dec 3, 2018 at 7:50 PM neeh [e-mail] wrote:

Thanks @iRyusa https://github.com/iRyusa for your quick answer!

What about mobiles? Is the stacking of columns intended? Is there a way to force columns to be side by side on mobile?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/issues/1444#issuecomment-443824307, or mute the thread https://github.com/notifications/unsubscribe-auth/AAizzcmfl-fkLM8s0FLlc2Zd6UpQd_oFks5u1XKCgaJpZM4Y_J_c .

– Cordialement, Maxime BRAZEILLES

– Cordialement, Maxime BRAZEILLES

[neeh]

Thanks! I should’ve had a better read at the doc for mobiles. I’m closing the issue.