# Are mj-attributes functional on grapesjs mjml?

**URL:** <https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875>\
**Category:** Product Support\
**Created:** [December 2, 2021, 4:36pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875 "2021-12-02T16:36:04Z")\
**Posts on this page:** 16\
**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:** [December 2, 2021, 4:36pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/1 "2021-12-02T16:36:04Z")

</div>

**Your software**  
My Mautic version is: 4.1.0  
My PHP version is: 7.4  
My Database type and version is: MySQL 8+

**Your problem**  
My problem is: I use mj-attributes for global attribute on all of the mjml components but it doesn’t seem to be functional in Mautic instead I have to apply attribute to each components. I tested it on MJML’s “Try it Now” and it working as intended.

These errors are showing in the log: none

Steps I have tried to fix the problem: None

---

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [December 2, 2021, 5:05pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/2 "2021-12-02T17:05:41Z")

</div>

yep, sad but true - see [https://forum.mautic.org/t/introducing-the-new-email-and-landing-page-builder/20640:](https://forum.mautic.org/t/introducing-the-new-email-and-landing-page-builder/20640:)

> ## Are there any limitations or known issues?
> 
> Currently there are some MJML elements which are not rendered by the builder:
> 
> 1. mj-head components are not rendered:
> 
> mj-attributes, mj-breakpoint, mj-font, mj-html-attributes, mj-preview, mj-style, mj-title
> 
> 1. Body components not rendered include:
> 
> mj-table

---

<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:** [December 2, 2021, 7:16pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/3 "2021-12-02T19:16:45Z")

</div>

Thanks for pointing it out …

☹

Oh well, hopefully one day … it’ll get included …

---

<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:** [December 2, 2021, 8:02pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/4 "2021-12-02T20:02:25Z")

</div>

What about full-width attribute? It doesn’t seem to be working with section or wrapper component.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [December 3, 2021, 7:32am UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/5 "2021-12-03T07:32:23Z")

</div>

I have to make an addition here. mj-style actually works.  
When you edit a text box, the text inside will be turned into a paragraph.  
Therefore this would work:

```auto
<mj-head>
	<mj-style>
     .greeting p, a {
	  color: #000 !important;
	  font-size: 12px !important;
	  font-weight: bold !important;
	  font-family: Verdana !important;
	  padding: 0px 0px 0px 0px !important;
	  }
	</mj-style>
  </mj-head>
<mj-body>
.
.
<mj-text padding="0px 0px 0px 0px" css-class="greeting">
<p>Hello movie lovers!</p>
</mj-text>

```

---

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [December 3, 2021, 11:23am UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/6 "2021-12-03T11:23:36Z")

</div>

oh, true, we’re using that too and it does work! Others too, like mj-title, so the linked posting is not accurate (anymore)  
BUT at least mj-attributes does _not_ work, and I understand that’s an architectural limitation that cannot easily be solved on the Mautic side ☹  
(Not sure what the actual state and perspective is, frankly…)

---

<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:** [December 3, 2021, 2:10pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/7 "2021-12-03T14:10:19Z")

</div>

Would this work then?

```auto
<mj-head>
	<mj-style>
     body {
            font-size: 12px !important;
            font-family: Verdana !important;
               }
	</mj-style>
  </mj-head>

```

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [December 3, 2021, 2:28pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/8 "2021-12-03T14:28:34Z")

</div>

Maybe, but if you use this expression you hardcode every text as 12px

---

<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:** [December 3, 2021, 2:39pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/9 "2021-12-03T14:39:36Z")

</div>

That is true …

---

<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:** [December 3, 2021, 8:09pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/10 "2021-12-03T20:09:11Z")

</div>

body class didn’t work …

---

<div class="post-metadata">

**Author:** ![fr500](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/fr500/32/6473_2.png) [@fr500](https://forum.mautic.org/u/fr500)\
**Post date:** [December 15, 2021, 4:40am UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/11 "2021-12-15T04:40:45Z")

</div>

Hi

What about mj-breakpoint?  
Isn’t it quite important to achieve full responsiveness?

Any workarounds to achieve a responsive layout?

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [December 15, 2021, 6:17am UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/12 "2021-12-15T06:17:07Z")

</div>

Not sure what you are trying to achieve, but maybe try grouping?

---

<div class="post-metadata">

**Author:** ![fr500](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/fr500/32/6473_2.png) [@fr500](https://forum.mautic.org/u/fr500)\
**Post date:** [December 15, 2021, 2:57pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/13 "2021-12-15T14:57:20Z")

</div>

When I resize my browser to test if a page will switch to a different layout, the switch never happens because breakpoint doesn’t work

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [December 15, 2021, 3:57pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/14 "2021-12-15T15:57:53Z")

</div>

Let’s understand.  
Are you building page or email?

---

<div class="post-metadata">

**Author:** ![christy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/christy/32/6416_2.png) [@christy](https://forum.mautic.org/u/christy)\
**Post date:** [December 16, 2021, 3:45pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/15 "2021-12-16T15:45:04Z")

</div>

Hi joeyk, I’m working with fr500 on this. We are building an email, using mjml to create the template.

When the template is opened in the grapes email builder, the email does not break from the desktop to the mobile version at the right place. The breakpoint is set for 600px, but the email does not break to the mobile version until 480px, which is too narrow for our content.

How can we make the columns stack at a wider width? Using does not seem to do anything.

Thanks!

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [December 16, 2021, 3:51pm UTC](https://forum.mautic.org/t/are-mj-attributes-functional-on-grapesjs-mjml/21875/16 "2021-12-16T15:51:49Z")

</div>

Hey,  
I hear you.  
I have no idea, but I would look in mjml forums. The builder should be following mjml standards in this matter.