Mjml: mj-group stacking into column on Gmail for iOS

[skywinston]

mj-group containing 2 columns with images breaks into a stacked column on Gmail for iOS. I have exported my code minified using the CLI command mjml source.mjml -o output.html --config.minify as well as using this tool, which was recommended in a separate issue. Here is the relevant section of my code (non-minified):

  <mj-body background-color="#F2F2F2" width="500px">
    <mj-section background-color="#FFFFFF" vertical-align="center" padding="24px 16px 30px">
      <mj-group vertical-align="center">
        <mj-column>
          <mj-image width="190px" padding="0"  src="https://marketing.cloudagentsuite.com/cdnr/34/acton/attachment/35764/f-0016/1/-/-/-/-/cloud-agent-suite-logo.png" alt="Cloud Agent Suite" />
        </mj-column>
        <mj-column>
          <mj-image width="98px" padding="0" align="right" src="https://marketing.cloudagentsuite.com/cdnr/34/acton/attachment/35764/f-0017/1/-/-/-/-/mlsok.png" alt="MLS OK" />
        </mj-column>
      </mj-group>
    </mj-section>
<!-- the remainder of the email -->
</mj-body>

And this is the result:

Reproduction Steps:

1. Start with the mj-group example from the docs
2. Replace image paths with my own, use correct width of image.
3. minify output using CLI or tool mentioned above.
4. paste code into litmus and run browser previews

Expected behavior:

I would expect the images to remain on the same line, and not break into a column, like so:

Observed behavior:

The image on the right falls beneath the image on the left, stacking them into a column on Gmail for iOS as well as Inbox for iOS.

Screenshots and GIFs

Screenshots included above.

MJML version:

4.0.5

Email clients the bug is seen on:

• Gmail App (iOS 10.3.2)
• Inbox by Gmail (iOS 10.3.2)

[iRyusa]

Screenshot taken from an iPhone 6 on EOA seems ok for me :

You may have an option checked somewhere in litmus that alter the minified output ? If the HTML works in Mail.app it should works in Gmail too (same webkit bug)

[iRyusa]

Closing because we're unable to reproduce on EOA part, feel free to reopen if it happens with a real device / other method

[Armedine]

This is a weird bug that continues to happen on certain iPhones with the Gmail app. It does not happen on all of my templates that use mj-groups. That's all I have right now - working when available to identify the issue. It will not always show stacked columns in the EOA previews (I'm not sure why). Co-workers bring their physical devices to me that show the stacked columns as described by @skywinston

I have acquired an iPhone 7 to see if it's specific to iPhone 6 and 6+ (which are the devices where it shows the symptom). Working on that still.

The apple reformatting meta tag does not fix the issue. As OP mentioned, you have to use a minifier with reduced max line length (I use 100) to get it to not stack.

[iRyusa]

I don't really advise to use max line length, it could break line in an
unwanted place causing Webkit to render it and stack columns. We would be
happy to reopen if someone can provide a template with 100% reproduction
rate on EOA/Litmus/Physical device.

On Mon, Jun 25, 2018 at 10:53 PM S. Baker [e-mail] wrote:

This is a weird bug that continues to happen on certain iPhones with the
Gmail app. It does not happen on all of my templates that use mj-groups.
That's all I have right now - working when available to identify the issue. It
will not always show stacked columns in the EOA previews (I'm not sure
why). Co-workers bring their physical devices to me that show the stacked
columns as described by @skywinston https://github.com/skywinston

I have acquired an iPhone 7 to see if it's specific to iPhone 6 and 6+
(which are the devices where it shows the symptom). Working on that still.

The apple reformatting meta tag does not fix the issue. As OP mentioned,
you have to use a minifier with reduced max line length (I use 100) to get
it to not stack.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1243#issuecomment-400091743, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzc3KmY8bMQ-7Zh69DRcYxFHKhY2jks5uAU2_gaJpZM4UlIeG
.

--
Cordialement,
Maxime BRAZEILLES

[shorstki]

I had issue with breaking mj-group. It seems that after HTML minification groups are displayed properly on iOS. At least on EmailOnAcid iPhones.

[ngarnier]

@shorstki indeed, there's a blue note in the docs about that:

iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.

[AnthonyLai1001]

Hi @shorstki, @iRyusa i'm using iphone6 with iOS 12.1, still i have same issue mj-group not working on Gmail app, i send from mailjet with code in document.

thanks!

[ngarnier]

Hey @AnthonyLai1001, we had to temporarily deactivate the minify setting in our builder for another reason, sorry about that. We're working to bring back minification for all templates asap, which will solve the issue.

[Sawyeraltman]

@ngarnier Is there any movement here on this minifier? I'm having the same issue. Mj-group works fine in the Try-It-Live, but when I fire the HTML it generates off to gmail, the lines stack. Same when I try and run it through a standard HTML minifier. Or perhaps there's another workaround? Thanks.

[iRyusa]

Just minify your html it should behave as it should then.

On 9 Apr 2019, at 20:10, Sawyeraltman [e-mail] wrote:

@ngarnier Is there any movement here on this minifier? I'm having the same issue. Mj-group works fine in the Try-It-Live, but when I fire the HTML it generates off to gmail, the lines stack. Or perhaps there's a current workaround? Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Sawyeraltman]

As I mentioned above, I tried that – it turns out I was just using a poor minifier. Just tried http://minifycode.com/html-minifier/ and it's come out nicely. Thanks.

[iRyusa]

That's the one shipped within MJML :)

On Tue, Apr 9, 2019 at 8:17 PM Sawyeraltman [e-mail]
wrote:

As I mentioned above, I tried that – it turns out I was just using a poor
minifier. Just tried http://minifycode.com/html-minifier/ and it's come
out nicely. Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1243#issuecomment-481371330, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzcDdfqXatfiKz1MglU2WDVjFntfJks5vfNksgaJpZM4UlIeG
.

[ChernovDev1996]

I would like to report the same persistent bug on Ipad Air 2 (iOS 12.1). Code minifying does not help in any way. The problem is on Gmail client, Apple mail is OK.

[iRyusa]

How did you send your email?

On Mon, Apr 15, 2019 at 9:40 PM Eugene Chernov [e-mail]
wrote:

I would like to report the same persistent bug on Ipad Air 2 (iOS 12.1).
Code minifying does not help in any way. The problem is on Gmail client,
Apple mail is OK.
[image: IMG_0040]
https://user-images.githubusercontent.com/40392032/56160275-7a864680-5fcf-11e9-956b-db22b9d27ba0.PNG

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1243#issuecomment-483389924, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzYBsYoQW87yRbX4YCYrgHKUIEOMCks5vhNXDgaJpZM4UlIeG
.

[ChernovDev1996]

It was via Sendpulse template editor. Could it potentially cause the issue?

[iRyusa]

Try with putsmail.com to Check yes

On 16 Apr 2019, at 08:01, Eugene Chernov [e-mail] wrote:

It was via Sendpulse template editor. Could it potentially cause the issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ChernovDev1996]

Thank you for the response, still very dependent on Sendpulse. It's our primary email marketing tool. What compatible solution can you suggest/if any? Maybe some 3rd party HTML minifier?

[ngarnier]

The issue is not with the minifier but with Sendpulse altering your HTML. The only solution is to ask them to stop messing with the HTML you want to send, or to change tools.

[angrykoala]

I'm having a similar problem using putsmail.com with the following code:

<mjml>
  <mj-body>

    <mj-section>
      <mj-group>
        <mj-column>
          <mj-text>
              <a href="https://en.wikipedia.org/wiki/Arthur_Dent">
                  <img width="50px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"/>
                  <p>Button 1</p>
              </a>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text>
              <a href="https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android">
                  <img width="50px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"/>
                  <p>Button 2</p>
              </a>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
  </mj-body>
</mjml>

It is looking good in every email client I've tried except gmail for IOS, where it is being stacked.

It works fine if using 3 columns instead

[Razinsky]

I confirm @angrykoala I have the same issue with Gmail iOS and by adding a third "empty" column fixes it! Thanks for the idea.

[limonfresh]

My team was running into the same problem. Two columns: left – 73%, right – 27% width, with a total of 100%.

_First of all: a big thank you to everybody, above who was trying to help and shared their solutions!_

• The solution with adding a 3rd column did not work for us.
• The solution with minifying via http://minifycode.com/html-minifier/ did work. But that way is hard to make changes without unminifying first.
• Finally, we come up with this solution: for the left column, we decreased the width by 1% and set that 1% as padding. That works perfectly.

Keep in mind: for some reason, this solution works only for the left column, but not for right.

Final result:

[iRyusa]

Well you should not modify the output html, unless you really need to do something specific with the html ?

[limonfresh]

Well you should not modify the output html, unless you really need to do something specific with the html ?

Yeah, but we kinda have no choice:

1. We have to provide the "final HTML" to our clients. This is one of their requirements.
2. We were unable to fix that problem inside of the MJML editor. So we had to "look deeper".

[ngarnier]

If you really want to edit the HTML without minifying, just remove the space between the columns as explained in the documentation. It's way more straighforward and not hacking with % to fix that iOS bug.

iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.

[limonfresh]

Thanks for this note, @ngarnier.
I wouldn't say that we really want to play around with output HTML, but we had to.

Anyway, I just need to point that we were able to do this hack with 1% in MJML code, even without digging into output HTML. So that way the output HTML was ready to deploy.
I would consider that solution as better and easier.

[omrirz]

My team was running into the same problem. Two columns: left – 73%, right – 27% width, with a total of 100%.

_First of all: a big thank you to everybody, above who was trying to help and shared their solutions!_

• The solution with adding a 3rd column did not work for us.
• The solution with minifying via http://minifycode.com/html-minifier/ did work. But that way is hard to make changes without unminifying first.
• Finally, we come up with this solution: for the left column, we decreased the width by 1% and set that 1% as padding. That works perfectly.

Keep in mind: for some reason, this solution works only for the left column, but not for right.

Final result:

This worked for me!

[marinarjumina]

@limonfresh, jeeesus, thank you so much for this solution!

[prkirby]

@shorstki indeed, there's a blue note in the docs about that:

iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.

@ngarnier Deleting the blank space worked for me, However I'd like to note for anyone else struggling with this, you can't just delete the blank line between the two, you must delete ALL BLANK SPACES surrounding the comments, etc, so its all on one line. Then it will work.