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

[anmdotdev]

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

[iRyusa]

Well how did you send your email, & can you test with putsmail.com ?

On Thu, Oct 11, 2018 at 12:47 PM Anmol Mahatpurkar [e-mail]
wrote:

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:
   Hello>World>
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

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1383, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAizzag4zC7oAaKqkfQeGsgoKd302XbSks5ujyGZgaJpZM4XXRrW
.

--
Cordialement,
Maxime BRAZEILLES

[anmdotdev]

This is strange, it works as expected with putsmail. We are using Amazon SES to send the mail. When using ses, it gets stacked on gmail. Sorry for an incomplete issue, but do you have any idea why this may be?

[ngarnier]

It seems like something in the way you send is altering & breaking the HTML. It looks like Amazon SES is to blame here, but if your content is going through anything else before being sent (such as any type of a post-processor or a CSS inliner for example), it might be it too.

I'm closing as the issue is not related to MJML but to a tool breaking the HTML upon sending. Please let us know once you find the culprit so it can help other people too :-).

[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?

[iRyusa]

Yeah because they're removing media query when they inline it.

Either your ESP alters the HTML, but I'm really confident about this one,
it's not related to MJML at all. I've double checked that it works just
fine on Email On Acid.

You probably have something in your stack that alter the MJML output in
some way that it doesn't work anymore.

On Thu, Oct 11, 2018 at 6:29 PM Anmol Mahatpurkar [e-mail]
wrote:

After a bit of research, I cam 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:

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

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?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1383#issuecomment-429024020, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzXApcCatYpfzRDKNNAkRU48CqpGzks5uj3HtgaJpZM4XXRrW
.

--
Cordialement,
Maxime BRAZEILLES

[anmdotdev]

No I am sure the ESP doesnt alter it, since when I used only one media query, it worked fine with our ESP as well.

When I say this may be an mjml issue, what I mean to say is that maybe the styles that are being generated by mjml, should be unified into one, instead of generating them as two separate queries, in two separate style tags.

Any reason you think why it worked with a single media query on my ESP, and not with the two? Maybe you can point me to the right direction

[ngarnier]

Putsmail breaks the style when you tick the box to inline the styles. When you don't, Putsmail doesn't alter the HTML in anyway.

This confirms that it works fine when you don't alter the HTML, so starting from there the issue is not with MJML. As soon as you start altering the HTML, the issue is not with MJML anymore :-).

[anmdotdev]

Yes that makes sense. Thank you for the help. I will try to debug further, and see what I get

[maubut]

I got the same trouble when i shoot an email by MailChimp, the column are stacked in Gmail!

Putsmail is all good..

Any solution about this?

[ngarnier]

The issue is on Mailchimp side so not much we can do (see their response).

However, you can try to deactivate the Automatic CSS inliner like explained here.

[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