Allow breakpoint control

[dalefish]

Occasionally, I have come across the need to change the breakpoint from 480 to x number, it would be nice to have an mj-container attribute or perhaps something in that would allow this to be controlled.

[iRyusa]

Hi @dalefish !

We'll introduce a mj-mobile-breakpoint (or something similar) in mj-head for this in MJML 4 ( probably try to sneak it into last 3.3.X version too)

[kirillbunin]

Is this still open? I didn't find any information in the docs about this. Would appreciate the feature as well :)

[iRyusa]

It's available in MJML4-alpha, couldn't make it happens in MJML 3

[janwidmer]

Hey..should this feature be working on MJML4-Alpha?

I updated to 4.0.0-alpha.5 and get the console output "No handler found for: mj-breakpoint, in mj-head, skipping it" when using it within the head..

[iRyusa]

Can you double check you're running the alpha ?

➜  test cat test.mjml
<mjml>
  <mj-head>
    <mj-breakpoint width="320px" />
  </mj-head>
  <mj-body>
    <mj-section><mj-column><mj-text><h1>Hello world!</h1></mj-text></mj-column></mj-section>
  </mj-body>
</mjml>
➜  test npm-exec mjml
Too much input arguments received
➜  test
➜  test npm-exec mjml -V
mjml-core: 4.0.0-alpha.5
mjml-cli: 4.0.0-alpha.5

And it does change the media query breakpoint for me

[janwidmer]

seems like I was still using the 3.3.5 version..after really upgrading, the parameter seems to work, but I get the error "TypeError: Cannot read property 'handler' of null Input file(s) failed to render" when running "mjml src/emails/email.mjml"

[iRyusa]

You might need to open a separate issue with the MJML you're using, there's a lot of migration to do on MJML4

[ngarnier]

The first beta release for MJML 4 is here so I'm closing! You can install it with npm install mjml@next

See the documentation for mj-breakpoint: https://github.com/mjmlio/mjml/blob/next/packages/mjml-head-breakpoint/README.md