mj-column gets vertically stacked on gmail, on desktop.

Describe the bug mj-column gets vertically stacked on gmail, in both desktop & mobile

To Reproduce Steps to reproduce the behavior:

1. Create a file with this MJML code: <mjml><mj-body><mj-section><mj-column><mj-text>Hello</mj-text></mj-column><mj-column><mj-text>World</mj-text></mj-column></mj-section></mj-body></mjml>
2. Convert it to html using mjml 4.2.0, running on a node, express server.
3. Send the HTML to an email address.
4. See error

Expected behavior mj-column should not vertically stack on desktop.

MJML environment (please complete the following information):

• OS: Ubuntu
• MJML Version: 4.2.0
• MJML tool used: mjml on node and express

Affected email clients (for rendering issues):

• Email Client: Gmail
• Browser Google Chrome

[anmdotdev]

With some intensive testing, I figured out there is probably a css inliner that is causing the issue at one syntax.

@-ms-viewport {
     width: 320px;
}

@viewport {
      width: 320px;
}

When I removed this above code from the generated html, it worked fine even with my server.

It seems like @viewport is something which is not supported by the inliner.

Try removing the above piece of code from the generated html to see if it works

[anmdotdev]

After a bit of research, I came across this. https://stackoverflow.com/questions/46856100/why-is-gmail-ignoring-my-media-queries-on-ios

So what this suggests is that, basically Gmail will only read the first media query.

So I checked the HTML generated by the above MJML Code. It had two media queries in the document:

<style type="text/css">
        @media only screen and (max-width:480px) {
            @-ms-viewport {
                width: 320px;
            }

            @viewport {
                width: 320px;
            }
        }
</style>

<style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-50 {
                width: 50% !important;
                max-width: 50%;
            }
        }
</style>

I modified the HTML to contain only one, i.e.

<style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-50 {
                width: 50% !important;
                max-width: 50%;
            }
        }
</style>

And It Worked! The columns are not stacking anymore.

Also, for some reason, when I select the move to inline option at putsmail, the columns dont work and they get stacked.

Now how did it work with Putsmail before? May be it combines both the style tags, into one. I am not sure.

So I do think this is indeed an MJML issue, and maybe we should reopen this. What do you think?