Appling CSS Classes / Centering Text Responsively in MJML

I had a strange problem trying to simply centre text on mobile views in MJML (which is definitely a smart way to avoid the crazy headaches Outlook introduces into creating responsive e-mails!).

I won’t enter into whether this is a good idea – media queries aren’t covered by every client even still.

Anyway, the solution is simple.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-section background-color="#fff" />
    </mj-attributes>
        <mj-style>

      @media all and (max-width:600px) {
        .mobile-center div {
          text-align: center !important;
        }

      }
    </mj-style>
  </mj-head>
......
....
....
 <mj-section>
      <mj-column width="26%" padding-right="0px">
        <mj-text font-size="13px" align="left" css-class="mobile-center">HELLO THERE</mj-text>

      </mj-column>
</mj-section>

This works… but only because of the “div” after .mobile-center in the media query declaration. It’s vitally important. Don’t miss it out! This caused me a bit of a headache, but fine once you know. It was weirdly difficult to find anyone else mentioning this. Only through trial and error did I realise why my text wasn’t centering – because referring to the class alone isn’t enough. When it converts to HTML, divs appear, which must also be referenced

Peter