Responsive text alignment

I frequently build layouts where I’d like to change the text alignment based on breakpoint. For example, I’ll have two columns on desktop: image in the left column, left-aligned text in the right column. On mobile, when the columns stack vertically, I’d like to center the text instead of keeping it left-aligned.

As far as I can tell, there’s no way to do this because the align property of <mj-text> applies to both breakpoints.

[ngarnier]

A simple media query will help you do that: https://mjml.io/try-it-live/rJ17Da6mX

Note that it’s better to use the default styles for the mobile layout (center), and then use a media query for the responsive behaviour on desktop (media queries are better supported in desktop clients).

[Gwix]

I might have a solution for that problem, it still needs to be tested all-around, but… If you declare, in your mj-all tag in mj-head, that default align for everything is “none”, rather than left/center/right (or omitting to declare which results in align=“center”), you might end up with an argument error in your HTML, but it surely can be overridden by inline styling and media queries. <td align="none"> I hope it’s gonna pass the final tests. But for now, M$ LookOut and Gmail are okay!