Mjml: Support media-queries in mj-style

[ngarnier]

Following the recent changes to Gmail regarding responsive, we'll start supporting media queries inside MJML, through the mj-style component.

[ngarnier]

Hello guys, as promised, we've integrated media queries in v3.3.0 (now in beta). Feedback welcome!

Example of implementation: https://mjml.io/try-it-live/HkokV_Due

PS: be careful, media queries are far from being supported in every email clients

[PaulMacinic]

I am having issues getting this to work. I am wondering is this something at my end or the the media queries don't work as they should yet ?

I attached a screenshot with what I am trying to do. Somehow the rules in the media query do not render.

Any idea about this ? :)

Later edit:
I also tried your example at the following page, and it seems its not working.
https://mjml.io/try-it-live/components/head-style

[subpixelch]

I have the same problem with this:

    <mj-style>
      @media all and (max-width: 590px) {
        table { 
          border-left: none !important;
          }
        }
    </mj-style>

it doesn't get rendered... with the online editor it works but not on my local machine.

[iRyusa]

@subpixelch Try it live currently run MJML 3.3 beta, so you have to install the beta with npm install mjml@beta if you want them locally

[iRyusa]

And it's probably the same for you @PaulMacinic !

[ngarnier]

Definitely of the most exciting features over the last months, media queries are now officially supported in MJML v3.3.0. Thanks everyone for your feedback!

To install: npm install mjml

[maxbln]

Hey guys, pretty nice feature, but seems not to work in android?
I tested it in litmus:

edit: I've read a few seconds ago, that @ngarnier wrote, that mq's are far away from full client support.

[iRyusa]

Yeah I don't think native Android client supports it, you probably should do media queries for desktop rather than mobile

[avalero85]

I have seen that on my mobile (Android with native gmail app) It doesn't center the Hello World Text

<mjml>
  <mj-head>
    <mj-style>
      @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } }
    </mj-style>
    <mj-style inline="inline">
      .link-nostyle { color: inherit; text-decoration: none }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
          <mj-divider border-color="#F45E43"></mj-divider>
          <mj-text font-size="20px" color="#F45e46" font-family="helvetica">
            Hello <a href="https://mjml.io" class="link-nostyle">World</a>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

But I see that if I you use a css class, the class will be include into the td markup and if I use the selector .tip div I have the expected behavior. Being .tip the class name that you want.

<mjml>
  <mj-head>
    <mj-style>
      @media all and (max-width: 480px) { .tip div { text-align: center !important } }
    </mj-style>
    <mj-style inline="inline">
      .link-nostyle { color: inherit; text-decoration: none }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
          <mj-divider border-color="#F45E43"></mj-divider>
          <mj-text font-size="20px" css-class="tip" color="#F45e46" font-family="helvetica">
            Hello <a href="https://mjml.io" class="link-nostyle">World</a>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[tabvn]

can we have better inline conditonal like

<mj-text font-size="{sm: "20px", "lg": "25px"}">Good job team!</mj-text>

or

<mj-text sm-font-size="20px" lg-font-size="25px">Good job team!</mj-text>

Thanks team