Mjml: change align based on media query?

[paOol]

I have some <mj-text> that should be align="left" on desktop, but I'd like it to be align="center" when it's the mobile view.

is this currently possible?

[iRyusa]

Hello @paOol

I'm afraid that we can't with current MJML version. Do you have any idea on how to implement that feature ?

[paOol]

I don't, but I do have an idea of how it should work and that might help you come up with a solution.

it should work like so

<mj-text desktop={align="left"} tablet ={align="right"} mobile ={ align="center"} >

or

if you look at https://github.com/contra/react-responsive and follow the same idea,

 <MediaQuery maxDeviceWidth={480}>
          <mj-text align="center">You are a mobile phone</mj-text>
  </MediaQuery>

 <MediaQuery maxDeviceWidth={1024}>
          <mj-text align="left">You are a tablet</mj-text>
  </MediaQuery>

although that is highly repetitive.

[iRyusa]

Well due to lack of support of media queries in most of clients, i believe this wont be possible.
If anyone has a solution feel free to reopen.

[jitendravyas]

this is a good idea. it can be possible with mjml, many clients supports media query so it can at least work in them

[ngarnier]

I like the idea but as @iRyusa said, most clients don't support media queries. Then, it wouldn't work for the majority of email clients and would break consistency.

For media queries support, see this post by Litmus.