mj-column stacked on desktop GMX / WEB.DE

[vielhuber]

Hello!

When using the german webmail clients gmx.de and web.de, mj-column items get stacked on desktop.

The reason for this is that the !important tag is stripped from these instructions:

So

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

becomes

<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100%; }
.mj-column-per-40 { width:40%; }
.mj-column-per-20 { width:20%; }
.mj-column-per-50 { width:50%; }
.mj-column-per-48 { width:48%; }
.mj-column-per-4 { width:4%; }
}
</style>

So the inline styles override those media queries.

A solution to this problem is to provide max-width values additionally. So we can get a good result also on desktop without breaking the mobile first approach with this code:

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

Do you agree? Should I make a pull request for that?

[iRyusa]

Hi @vielhuber thanks for investigating this !

I thought it was only because gmx didn't support any media queries, so we skipped it

Well why not to add them, but we need to check the compatibility everywhere to see if it doesn't break anything in other clients.

[vielhuber]

GMX supports media queries.

The good thing about the addition is that it makes sense from a logical viewpoint.
Therefore it should not break something.

Do you prefer a pull request or do you update the code on your own? It would be nice to have that feature also in MJML v3.

[iRyusa]

Well MJML3 is now legacy, we won't introduce anything new in this branch (only bug fixes for breaking stuff), you can totally do a PR on MJML4 for that ! I think it need a (big?) litmus test to see across the clients how it behave with this max-width

[vielhuber]

OK, I will do a PR on MJML4.

Off topic: Do you already recommend MJML4 for production use? There's no documentation or am I wrong?

[iRyusa]

Alpha has been quite stable, if you convert carefully your document ( remove container, apply unit everywhere, re-do ) it should be exactly as MJML3 minus some component.

Yeah documentation isn't ready yet, we're doing a big pass for the first beta to update everything (contributions are welcome on this 👍)

[vielhuber]

All information available on new features (gutter etc.) I'm currently find on the medium articles, correct?

[iRyusa]

Exactly :)