mjml
mjml copied to clipboard
mj-hero max-width issue
Inside the generate mj-hero HTML that gets generated is a div with a max-width of 600px, is there any way I can change that? I'd like mj-hero's background image to stretch wider if the container is bigger than 600px, I would've thought that would be tied to the mj-body, or just been auto/100%
Any ideas? Otherwise anyone have a custom mj-hero block they've built that can be wider than 600px?
I did some digging and it appears as if it's setting it to "containerWidth" which I'd have thought would be the width of mj-body, but even if I set mj-body to 800px or something first, it still has a max-width of 600px. It seems to be pulling it from "this.context" in the mjml-browser module any idea if we can override that at a higher level in grapesjs without monkeying with the source modules?
hi,
i encouter the same issue with the mj-wrapper too, like you the only solution i've found is to modify the default width in node_modules/mjml-browser/lib/mjml-browser.js
.
upgrading mjml browser to the latest build, and adding default attributes with mj-attributes, seems to fix this behavior for me.
<mj-attributes>
<mj-body width="900px"/>
<mj-section padding="0" width="900px"/>
<mj-wrapper padding="0" width="900px"/>
</mj-attributes>
hmm, I might need to update my grapesjs-mjml plugin as well, I tried rebuilding which I assume will rebuild with the newest browser and it still doesn't work properly. Unfortuantely I can't use the latest because of some other bugs that will hopefully be fixed with the next release