My problem is : GrapeJS supports full width attribute.
Not able to achieve full width within a section or wrapper in GrapeJS on Mautic.
Please advise …
Thank you
I guess it depends much on the template you use. Did you go into the source code to see what is happening?
In mjml it’s easy and it works
<mj-section full-width="full-width">
</mj-section>
It work for you? I will try again because it not working for me.
Nope still doesn’t work for me in Mautic … See screenshot below Full Width work fine if it not in Mautic like Visual Studio Code but once I paste it in Mautic or convert it to template and upload it to Mautic. The full width no longer functions or some how is stripped.
Add a new section and full width attribute/class to it. You can also see background color attribute/class next to it that seems to be working fine.
Full width still not working
Save your email, send a test or open the web-view, it works. I’m sharing with you the code of a whole template with full-width sections down there. Past it, it works on mailboxes, with both mautic and grapeJS (Even better when used on a template file).
<mjml>
<mj-head>
<mj-font name="Lato, Roboto" href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto&display=swap" />
<mj-title>{subject}</mj-title>
<mj-attributes>
<mj-all font-family="Roboto, Consolas, Helvetica, sans-serif" />
<mj-all color="black" />
<mj-all align="center" />
<mj-all font-size="20px" />
<mj-class name="page" background-color="#fefefe" width="800px" />
<mj-class name="header" background-color="#000000" full-width="full-width" />
<mj-class name="heading" background-color="white" />
<mj-class name="heading-text" font-family="Lato, Arial, sans-serif" font-size="40px" font-weight="700" />
<mj-class name="body" background-color="white" />
<mj-class name="footer" background-color="#000000" full-width="full-width" />
<mj-class name="footer-text" color="white" font-family="Lato, Arial, sans-serif" font-size="16px" font-weight="500" />
</mj-attributes>
<mj-style inline="inline">
a, a:hover, a:focus, a:visit { color: inherit; text-decoration: none }
</mj-style>
</mj-head>
<mj-body mj-class="page" width="800px" background-color="#fefefe">
<mj-section mj-class="header" full-width="full-width" background-color="#000000">
<mj-column>
<mj-image src="https://www.mautic.org/themes/custom/mauticorg_base/logo.svg" width="65px" height="75px" alt="Logotype" href="https://www.mautic.org" />
</mj-column>
</mj-section>
<mj-section mj-class="heading" background-color="white">
<mj-column>
<mj-text mj-class="heading-text" align="center" font-family="Lato, Arial, sans-serif" font-size="40px" font-weight="700">{subject}
</mj-text>
</mj-column>
</mj-section>
<mj-section mj-class="body" background-color="white">
<mj-column>
<mj-text align="center" font-family="Roboto, Consolas, Helvetica, sans-serif" font-size="20px">Une colonne
</mj-text>
</mj-column>
</mj-section>
<mj-section mj-class="body" background-color="white">
<mj-column>
<mj-text align="center" font-family="Roboto, Consolas, Helvetica, sans-serif" font-size="20px">Colonne 1
</mj-text>
</mj-column>
<mj-column>
<mj-text align="center" font-family="Roboto, Consolas, Helvetica, sans-serif" font-size="20px">Colonne 2
</mj-text>
</mj-column>
</mj-section>
<mj-section mj-class="footer" background-color="#000000" full-width="full-width">
<mj-column>
<mj-text mj-class="footer-text" align="center" color="white" font-family="Lato, Arial, sans-serif" font-size="16px" font-weight="500">Mautic
<br>France
<br>Paris 75000 - FR
<br>This was sent to <a href="mailto:{contactfield=email}" rel="noopener noreferrer" target="_blank">{contactfield=email}</a>
<br>
<br>
<a href="{webview_url}" rel="noopener noreferrer" target="_blank">Browse online</a> |
<a href="{unsubscribe_url}" rel="noopener noreferrer" target="_blank">Unsubscribe</a>
</mj-text>
<mj-social icon-size="40%" border-radius="50%" mode="horizontal">
<mj-social-element href="http://exemple.com" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png">
</mj-social-element>
<mj-social-element href="http://exemple.com" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png">
</mj-social-element>
<mj-social-element href="http://exemple.com" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png">
</mj-social-element>
<mj-social-element href="http://exemple.com" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" color="#000000">
</mj-social-element>
</mj-social>
<mj-image src="https://www.mautic.org/sites/default/files/2020-02/background_homepage_learn-more_11.jpg" width="800px" alt="Placeholder" />
</mj-column>
</mj-section>
</mj-body>
</mjml>
it seems you are correct, it will work once it’s emailed out or on a landing page.
So it does not render correctly in Mautic editor itself?
I could teach our staff to ignore the rendering in editor and send test email to themselves before sending it out. I only develop the application or website. I don’t use it or handle the contents. The communication staff will be the ones doing it and we have some staff learning the GrapesJS / MJML layout editing.
Thank you for sharing this tip! Glad to see that it will work outside of Mautic editor as intended.