# How do we achieve full width on GrapeJS wrapper or section?

**URL:** <https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519>\
**Category:** Mautic 4 Install/Upgrade Support\
**Created:** [January 28, 2022, 3:41pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519 "2022-01-28T15:41:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [January 28, 2022, 3:41pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/1 "2022-01-28T15:41:02Z")

</div>

_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

---

<div class="post-metadata">

**Author:** ![mneumann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mneumann/32/2512_2.png) [@mneumann](https://forum.mautic.org/u/mneumann)\
**Post date:** [March 2, 2022, 10:13pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/2 "2022-03-02T22:13:48Z")

</div>

I guess it depends much on the template you use. Did you go into the source code to see what is happening?

---

<div class="post-metadata">

**Author:** ![jonathandhn](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/jonathandhn/32/5737_2.png) [@jonathandhn](https://forum.mautic.org/u/jonathandhn)\
**Post date:** [March 3, 2022, 10:06pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/3 "2022-03-03T22:06:50Z")

</div>

In mjml it’s easy and it works

```auto
    <mj-section full-width="full-width">
    </mj-section>

```

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [March 4, 2022, 5:35pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/4 "2022-03-04T17:35:06Z")

</div>

It work for you? I will try again because it not working for me.

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [March 4, 2022, 5:43pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/5 "2022-03-04T17:43:57Z")

</div>

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.

 ![Screen Shot 2022-03-04 at 11.40.30 AM](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/7/725f77b655f5fffe5d34f6941988218e6173108f.jpeg)

Full width still not working

 ![Screen Shot 2022-03-04 at 11.39.53 AM](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/7/7471ca663f8eaf7a1cfb118e05da9f9d90704630.jpeg)

---

<div class="post-metadata">

**Author:** ![jonathandhn](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/jonathandhn/32/5737_2.png) [@jonathandhn](https://forum.mautic.org/u/jonathandhn)\
**Post date:** [March 8, 2022, 12:15am UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/6 "2022-03-08T00:15:28Z")

</div>

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).

```auto
<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>&nbsp;
          <br>&nbsp;
          <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>

```

 ![Capture d’écran 2022-03-08 à 01.05.36](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/34e4c4b84f74aac083dc0d0ae089667dca7cb145.jpeg)  
 ![Capture d’écran 2022-03-08 à 01.05.56](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/3d9024d1521e821b5a46e0005c3d276af2c6a333.jpeg)

---

<div class="post-metadata">

**Author:** ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)\
**Post date:** [March 8, 2022, 3:42pm UTC](https://forum.mautic.org/t/how-do-we-achieve-full-width-on-grapejs-wrapper-or-section/22519/7 "2022-03-08T15:42:28Z")

</div>

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.