Mjml: how to create no responsive email

[wireinet]

hello developers! Can you tell me - it is possible to create no responsive email? as i can see not of all clients can support adaptive email, and what if i want to create simple, 600px mail template without responsive - can i do that in you app - or it use only for responsive emails?

[ngarnier]

hey @wireinet, MJML is meant exactly for that:

i can see not of all clients can support adaptive email

The point of MJML is that it will render responsive email in all clients that support it, and still an easy-to-read email in clients that don't support adaptive email, so you don't have to worry about that.

Anyway, if you still want something not responsive at all, you can simply use:

• mj-table to create a table layout
• group your columns inside mj-group so they remain side-by-side on mobile

Again, that would be a pity as MJML has all you need to ensure your email is responsive everywhere.

[wireinet]

hello ngarnier. Thank you for you reply!
You close it, ok. but one more...
_i can see not of all clients can support adaptive email_ - if they dont support - my layout looks like they need to look in mobile version - i mean - one - after one - no side by side
_i can see not of all clients can support adaptive email_ - if they dont support - my layout looks like they need to liiok in mobile version - i mean - one - after one - no side by side...

[ngarnier]

Yep, that's because MJML is mobile-first. Think about it, would you rather, when an email client doesn't support adaptive email:

• show a desktop layout on a mobile email client --> this means the email will be unreadable, the user will have to zoom in or to scroll horizontally
• show a mobile layout on a desktop email client --> this means the email won't look the best, but at least it will be totally readable

We think the second option is better, and that's why we chose to make MJML mobile-first. But, if you don't agree, feel free to use one of the options I mentioned in my first comment.

[wireinet]

ok. now i full understand! Thank you for explained to me!

[Tiberriver256]

Just wanted to share my workaround her in case there are other odd-balls out there like me who prefer to write emails in mjml but don't want the full responsiveness.

<mjml>
  <mj-head>
    <mj-style>
      .body {min-width: 800px;}
    </mj-style>
    <mj-breakpoint width="5px"></mj-breakpoint>
  </mj-head>
  <mj-body width="1200px" css-class="body">
    ...
  </mj-body>
</mjml>

What this does is let it stretch and shrink between 1200px and 800px but no smaller. The mj-breakpoint prevents columns from wrapping on top of each-other.