# My custom HTML code doesn't render correctly on Gmail

**URL:** <https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391>\
**Category:** Product Support\
**Tags:** mautic-3, mautic-4\
**Created:** [October 24, 2021, 10:25pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391 "2021-10-24T22:25:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\
**Post date:** [October 24, 2021, 10:25pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/1 "2021-10-24T22:25:12Z")

</div>

**Your software**  
My Mautic version is: 4.0.1  
My PHP version is: 7.4.18  
My Database type and version is: MariaDB 10.5.9

**Your problem**  
My problem is: After creating a new email with “Code Mode”, editing the HTML, and saving the email, Mautic (or probably GrapesJS) refactor my HTML code and remove my inline CSS to the `<style>` tag.

The email is rendered well on Apple Mail and some other known email clients, but it’s not rendered properly on Gmail.

A chunk from my HTML code:

```auto
<td
  align="center"
  bgcolor="#6366F1"
  role="presentation"
  style="
    border: none;
    border-radius: 3px;
    cursor: auto;
    mso-padding-alt: 10px 25px;
    background: #6366f1;
  "
  valign="middle"
>
  <a
    href="{pagelink=1}"
    style="
      display: inline-block;
      background: #6366f1;
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      line-height: 1.15;
      margin: 0;
      text-decoration: none;
      text-transform: none;
      padding: 10px 25px;
      mso-padding-alt: 0px;
      border-radius: 3px;
    "
    target="_blank"
  >
    Yes, subscribe me to this list.
  </a>
</td>

```

The new HTML after pasting it to the builder:

```auto
<td
  align="center"
  bgcolor="#6366F1"
  role="presentation"
  valign="middle"
  id="idqbp"
>
  <a
    href="{pagelink=1}"
    target="_blank"
    id="iirh6"
  >
    Yes, subscribe me to this list.
  </a>
</td>
<style>
#idqbp {
  border: none;
  border-radius: 3px;
  cursor: auto;
  mso-padding-alt: 10px 25px;
  background: #6366f1;
}
#iirh6 {
  display: inline-block;
  background: #6366f1;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.15;
  margin: 0;
  text-decoration: none;
  text-transform: none;
  padding: 10px 25px;
  mso-padding-alt: 0px;
  border-radius: 3px;
}
</style>

```

Apple Mail:

 ![Screen Shot 2021-10-24 at 22.21.57](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/c/c99792382b515040a263677fcc7761d5b5edff07.png)

Gmail:

![Screen Shot 2021-10-24 at 22.23.13](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/15ac28d2ce664ba0ed9c8e8d9f13093144ec70ba.png)

Gmail supports only inline CSS, so all my CSS code was ignored.

---

<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:** [October 25, 2021, 6:41am UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/2 "2021-10-25T06:41:02Z")

</div>

Hi, yes the builder does this.  
In order to make the email look good in every browser, you shoult use MJML.  
Alternatively try to wrap your non-mjml code into tags.  
[https://documentation.mjml.io/#mj-body](https://documentation.mjml.io/#mj-body)

---

<div class="post-metadata">

**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\
**Post date:** [October 25, 2021, 11:02am UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/3 "2021-10-25T11:02:15Z")

</div>

Hello @joeyk, thank you for your reply, I tried to add my HTML code into `<mj-raw>` tag, but the same problem, the inline CSS styles were removed from the whole code.

MJML code:

```auto
<mjml>
  <mj-body>
    <mj-raw>
      <p style="color: red;">Hello</p>
    </mj-raw>
  </mj-body>
</mjml>

```

Result code:

```auto
<mjml>
  <mj-body>
	<mj-raw>
	  <p id="ipvn">Hello
	  </p>
	</mj-raw>
  </mj-body>
</mjml>

```

Also, the GrapesJS builder doesn’t support some basic MJML tags like: `mj-attributes`, `mj-class`, `mj-style`, …, and it adds a default margin to all `<p>` tags that make my code impossible to customize it.

---

<div class="post-metadata">

**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\
**Post date:** [October 25, 2021, 11:30am UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/4 "2021-10-25T11:30:05Z")

</div>

💡 Workaround:

1. Create the emails using MJML in vscode, then compile the code with the [mjml-cli](https://npmjs.com/package/mjml-cli): `mjml -w ./emails/**/*.mjml -o ./dist -c.minify true -c.beautify false`.

2. Copy/paste the HTML code directly to the database by navigating to the `emails` table, clicking on the edit button, then pasting the code into the `custom_html` field.

I tested this solution on my dev env with an SMTP tester, the code is sent correctly with the inline CSS.

Is there any side effect of this solution? It’s safe to push it to the prod env?

---

<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:** [October 25, 2021, 12:18pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/5 "2021-10-25T12:18:28Z")

</div>

Which template are you using? Codemode?  
What happens if you use anything but codemode?

---

<div class="post-metadata">

**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\
**Post date:** [October 25, 2021, 1:06pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/6 "2021-10-25T13:06:35Z")

</div>

Yes, I tested the Code Mode and also all the built-in templates in the Mautic (4.0.1), but the same problem was with the inline CSS.

I noticed that in the Mautic 4.0.1 the Code Mode interface is the same as the template interface, but on the Mautic 3.3.3 the Code Mode has a different interface, it contains only an HTML editor with a preview area without the drag-and-drop feature.

**Mautic 4.0.1:**

 ![1](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/3d3ad9c6e4e1cbea2164d651bdde9a9489e93eab.jpeg)

The builder screenshot after selecting the Code Mode:

 ![2](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/4/461521fe6e2ae0837b611475702b9469c4ba2394.png)

**Mautic 3.3.3:**

 ![3](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/d/d845d7718ec9102569145c86addbbfd08e5931e3.jpeg)

The builder screenshot after selecting the Code Mode:

 ![4](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/2/2e2f4cf354243e0138222f2332ddb44fa9baeaac.png)

I think it’s a bug on the Mautic 4.0.1 with the Code Mode interface, as you see above, the Code Mode and Template Mode have the same interface, which makes the edit experience for the Code Mode the same as Template Mode.

---

<div class="post-metadata">

**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\
**Post date:** [October 26, 2021, 3:21pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/7 "2021-10-26T15:21:16Z")

</div>

Any Idea guys?

---

<div class="post-metadata">

**Author:** ![hcoder](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/hcoder/32/6424_2.png) [@hcoder](https://forum.mautic.org/u/hcoder)\
**Post date:** [December 8, 2021, 8:54pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/8 "2021-12-08T20:54:27Z")

</div>

Having the same issue. Had to rebuild my instance back on another version (went back to 3.0.1 since that is what a few other Mautic instances are on).

Mautic team, please update. Still broken in 4.0.2

---

<div class="post-metadata">

**Author:** ![hcoder](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/hcoder/32/6424_2.png) [@hcoder](https://forum.mautic.org/u/hcoder)\
**Post date:** [December 9, 2021, 2:17pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/9 "2021-12-09T14:17:37Z")

</div>

We never had to use MJML in previous versions, this is definitely a bug in 4.0.2. It looks like its adding arbitrary code to the html in the builder when selecting code-mode.

---

<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 9, 2021, 5:38pm UTC](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391/10 "2021-12-09T17:38:09Z")

</div>

Yes, that html template (blank) is highly unreliable.