Columns breaks on some Google Apps account #24

philippebarbosa · 2016-02-07T18:57:30Z

(with Chrome 48.0.2564.97 (64-bit), on Mac OsX El Capitan)

As seen on your site template :

  <!-- Side image -->
  <mj-section background-color="white">
    <mj-column>
        <mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg"></mj-image>
    </mj-column>
    <mj-column>
        <mj-text font-style="italic"
                 font-size="20"
                 font-family="Helvetica Neue"
                 color="#626262">
            Find amazing places
        </mj-text>
        <mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
    </mj-column>
  </mj-section>

Does not render well in gmail :

Work in that case (small texts in columns) :

<mj-section>
    <mj-column>
        <mj-text align="center">
          foo
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center">
          bar
        </mj-text>
    </mj-column>
</mj-section>

but not with more text :

<mj-section>
    <mj-column>
        <mj-text align="center">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </mj-text>
    </mj-column>
</mj-section>

iRyusa · 2016-02-08T10:26:40Z

Hey there!

Did you used the try-it-live ? Because I believe that's fixed on the released mjml package, here's how it
render on current MJML 1.0.3 on Gmail !

I'll ping the documentation team to update try it live with latest engine version.

philippebarbosa · 2016-02-08T10:45:33Z

Hey,
yes, for the "side image" example, I pasted the code from the try-it live, rendered it and tried to send it to me from Mailchimp template.
Example with the first example template, you can see columns break on my browser : http://barbo.sa.com/sAtK/4u8U6Nl4

But i'm currently using MJML to design my newsletter and did many tests from scratch, and i still have the bug :(

iRyusa · 2016-02-08T11:10:48Z

Can you provide me the full mjml markup you're using ?

Did you refresh the try it live, they updated the MJML package a few minutes ago

philippebarbosa · 2016-02-08T11:30:47Z

I've just uddated to 1.0.3.
Columns still breaking on my gmail :(
Here the cases

Copy mjml code from basic, pasted on my file, rendered it and pasted to Mailchimp templates. Then send a test mail to me.
Did the same thing with the newsletter layout.

Please note that each time i need to delete the @import from html rendered, as mentionned on #22

Here is the results :

iRyusa · 2016-02-08T11:38:50Z

Mhh don't know what happens, using litmus and copy/pasted html from Try It Live I have this :

Can Mailchimp alter the html?

philippebarbosa · 2016-02-08T11:48:12Z

Sounds like you said something very interesting : Mailchimp may alter the html. Can't see anything else :( Do you want me to send you a test case, so you could investigate the code ?
I'm going to make searchs on it tonight, i'll give you informations if i find something.

iRyusa · 2016-02-08T12:08:06Z

Would like to ! Can you send this html https://gist.github.com/iRyusa/5d8b669fae9c6bb4ba94 to me at maxime@derniercri.io ?

philippebarbosa · 2016-02-08T12:12:13Z

Done !

philippebarbosa · 2016-02-08T12:12:53Z

Please note that line 22 to 24 are deleted before sending (see #22)

iRyusa · 2016-02-08T13:22:24Z

It renders well on my gmail, do you use any extension for your gmail inbox ?
Can you try with another browser**(edit:yups) to see if this is chrome specific for you ?

philippebarbosa · 2016-02-08T14:24:30Z

Oh, well asked ! So, just tested :

on private mode (no extensions)
Google Chrome Canary (don't have any extensions on it)
Firefox (don't have any extensions on it)

Still breaking.

I'm investigating right now to see what could break the layout on my environment…

philippebarbosa · 2016-02-08T14:26:00Z

Example with Firefox :

iRyusa · 2016-02-08T14:57:41Z

Mhh, can you open only the mail in a new tab and give me the whole html ? I would like to check the html on your side

philippebarbosa · 2016-02-08T15:03:59Z

Ok, it's here :
https://gist.github.com/philippebarbosa/6dc8414e9c0931fef6e3

iRyusa · 2016-02-08T15:25:04Z

I'm getting out of ideas, looks like in your environment media queries aren't applied at all. Weird thing is, all your columns have their aria-labelledby attributes..

philippebarbosa · 2016-02-08T16:09:55Z

Out of ideas too. Next step could be to know if some users are facing the same problem.
I'll send the test mail to fews, asap. I keep in touch with you from that case ;)
Available for further help, if needed. Just tell me.

iRyusa · 2016-02-08T17:05:31Z

Adding a cannot reproduce label atm, when we have a step te reproduce or identified what can cause that issue I'll take another look at it

joaopvilla · 2016-02-08T18:22:57Z

I'm facing the same problem :/
And isn't just in Gmail:

Gmail:

Polymail:

Can anyone help me (again)? :p

iRyusa · 2016-02-09T09:57:59Z

Meh, don't know why media queries aren't applied

@joaopvilla I sent you an email from litmus, do you have the same problem ?

iRyusa · 2016-02-09T15:09:33Z

@joaopvilla or @philippebarbosa can you provide the original mail with this :

Thanks !

philippebarbosa · 2016-02-09T15:21:23Z

Link to the gist sent by mail !

iRyusa · 2016-02-09T16:51:53Z

Well from @hteumeuleu 's observations, It might be an issue with google apps account that threat some css differently.

CF here: https://www.emailonacid.com/app/acidtest/display/summary/SP3SHdNanQ52HhvdSNFQQxLbIVBbf35AWhOIjsotKErCp/shared

He's working on a fix, we keep you informed as soon as it's available

philippebarbosa · 2016-02-09T17:29:49Z

Ok, great. Let me know.
Thanks a lot !!

iRyusa · 2016-02-10T09:48:19Z

@philippebarbosa @joaopvilla can you confirm that you're both using a google apps free account ?

philippebarbosa · 2016-02-10T09:49:22Z

Not me, i'm using google apps for work.

akacha · 2016-04-29T14:11:45Z

@hteumeuleu I have read this entire thread and I can tell that I understand in the app gmail mobile breaks, let me know if have any idea how to fix it, I'm testing email responsive and works great on mobile devices and exept desk in the app gmail

iRyusa · 2016-04-29T15:31:33Z

Hi,
Closing this one, at the moment we have no solution.See #40 for clients that display MJML in mobile version

akacha · 2016-04-29T15:45:04Z

:/ Thank you

freakintoddles2 · 2016-05-13T20:26:41Z

@iRyusa is there any hope on this issue beyond petitioning gmail?

rickyngk · 2016-06-16T02:27:05Z

AFISK, Google app removes all script tag. So the key point is how columns being performed without script tag. I think that now we treat it as single column.

This is my custom module that displays 2 cols. It's not optimised yet.

  class TwoColumnVideoThumbnails extends Component {
    render() {
      const {mjAttribute} = this.props
      let thumb1 = mjAttribute('thumb1');
      let link1 = mjAttribute('link1');
      let desc1 = {__html: mjAttribute('desc1')}
      let thumb2 = mjAttribute('thumb2');
      let link2 = mjAttribute('link2');
      let desc2 = {__html: mjAttribute('desc2')}

      let textColor = mjAttribute('textColor');

      let listStyle = {
        'fontFamily': 'Arial',
        'width': '90%',
        'margin': '0 auto'
      }

      let itemStyle = {
        'fontFamily': 'Arial',
        'width': '50%',
        'float': 'left',
        'margin': '0 auto',
        'textAlign': 'center'
      }

      let linkStyle = {
        'textDecoration': 'none'
      }

      let thumbStyle = {
        width: '90%',
        'maxWidth': '300px'
      }

      let descStyle = {
        color: textColor,
        'fontFamily':'Arial, Helvetica, sans-serif',
        'fontSize': '10pt',
        'lineHeight': '120%'
      }
      return (
        <MJMLRaw>
          <div className="list-news" style={listStyle}>
            <style>{"\
            .list-news{\
              margin:0 auto;\
            }\
            .list-news .col6{\
              width:50%;\
              float:left;\
              margin:0 auto;\
              text-align:center;\
            }\
            @media (max-width: 500px){\
              .list-news .col6{\
                width:100%!important;\
              }\
            }"}</style>
            <div className="col6" style={itemStyle}>
              <a href={link1} style={linkStyle}>
                <img src={thumb1} style={thumbStyle}/>
                <div style={descStyle} >
                  <p dangerouslySetInnerHTML={desc1}></p>
                </div>
              </a>
            </div>
            <div className="col6" style={itemStyle}>
              <a href={link2} style={linkStyle}>
                <img src={thumb2} style={thumbStyle}/>
                <div style={descStyle} >
                  <p dangerouslySetInnerHTML={desc2}></p>
                </div>
              </a>
            </div>
          </div>
        </MJMLRaw>
      )
    }
  }

remidesroques · 2016-07-04T13:01:24Z

@rickyngk Could you explain a bit more your answer. I have no clue what technique you are using or even where nor how to put it in my code. Please help. This layout breaking up in gmail is really a big deal as all my templates stopped working and now display the mobile version in desktop gmail.

jaypeedevlin · 2016-08-22T20:34:18Z

If another case is helpful, I'm experiencing this with the following:

<mjml>
  <mj-body>
    <mj-container>
      <!-- Start Item Block -->
      <mj-section background-color="#FFFFFF" padding="0">
        <mj-column width="33%">
        </mj-column>
        <mj-column width="67%">
          <mj-text color="#4C5364" font-size="16px" font-weight="bold" align="center" padding="20px 10px 0px 10px">
            NEW: Machine Learning Missions
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#FFFFFF" padding="0 0 10px 0">
        <mj-column width="33%">
          <mj-image src="https://s3.amazonaws.com/dq-email/newsletter_2016_08/machine-learning.png" href="https://www.dataquest.io/mission/208/overfitting/?utm_source=intercom&utm_medium=email&utm_campaign=newsletter_08_06_new_content" padding="10px" align="center"
          />
        </mj-column>
        <mj-column width="67%">
          <mj-text color="#4C5364" font-size="16px" align="left" padding="10px">
            <p>We've continued to expand the machine learning sections of our data scientist path.</p>
            <p>You'll learn about overfitting and the bias-variance tradeoff in our <a href="https://www.dataquest.io/mission/208/overfitting/?utm_source=intercom&utm_medium=email&utm_campaign=newsletter_08_06_new_content" style="color:#33CC99;">Overfitting mission</a>.
              Then, learn how to prevent overfitting and build more rigorous models in our <a href="https://www.dataquest.io/mission/207/k-fold-cross-validation/?utm_source=intercom&utm_medium=email&utm_campaign=newsletter_08_06_new_content" style="color:#33CC99;">K-Fold Cross Validation mission</a>.</p>
          </mj-text>
          <mj-button background-color="#7878B3" color="#FFFFFF" font-size="16px" font-weight="bold" align="center" href="https://www.dataquest.io/mission/208/overfitting/?utm_source=intercom&utm_medium=email&utm_campaign=newsletter_08_06_new_content" padding="18px"
            border-radius="10px">Learn about Overfitting</mj-button>
        </mj-column>
      </mj-section>
      <!-- End Item Block -->
    </mj-container>
  </mj-body>
</mjml>

JaimeHolland88 · 2017-02-08T12:08:46Z

Hi, I was having a similar problem with gmail not respecting my MJML column width. I then went to the HMTL code and noticed in the column's div tag that it tries to set the width at 100% in the styling.

Once I changed this to the actual width of my MJML column it seemed to fix the problem at least with gmail.

iRyusa · 2017-02-08T13:56:19Z

Well this is the intended behaviour of a column, MJML has a mobile first approach, so column size are applied through media queries. How are you sending your emails ? And do you use a regular Gmail account or a non Gmail address on it ?

JaimeHolland88 · 2017-02-08T15:34:14Z

Hi, (disclaimer - I am a designer and not an engineer so I am still learning how this works ;) ) I understand what you're saying. The problem I am having was in the beginning my email code was not working on gmail, but on my macbook's mail app, so in the HTML, I changed the styling in the

tag where my mj-column was located. Because the problem was gmail was rendering my email code as if the 50% column width I was setting was 100%. By removing that "width 100%" in the

style tag I managed to fix the rendering problem with gmail. But not yet with mobile :( it is still doing the same thing .

ngarnier · 2017-02-08T15:52:18Z

Hi @JaimeHolland88, very sorry but we're not sure to understand your issue!

If it's that on Gmail desktop, the mobile layout is shown (columns stacking instead of being side by side), it's most likely that the Gmail version you're using doesn't support responsive styles (see this Litmus post for details).

If this is not the issue, please open another issue with as much information as possible, following this template.

Cheers!

Atchworks · 2017-02-12T16:37:13Z

Hi,

I have same issue with gmail (Thunderbird , yahoo is ok)

First time, Gmail and thunderbid add . before style

<style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-60 { width:60%!important; }
..mj-column-per-40 { width:40%!important; }
..mj-column-per-100 { width:100%!important; }
..mj-column-per-33 { width:33.333333333333336%!important; }
  }
</style>

I move the media in general style.

All it's OK in Thunderbird and Gmail
/**** Media Query ****/

@media only screen and (min-width:480px) {
	.mj-column-per-50 { width:50%!important; }
	.mj-column-per-100 { width:100%!important; }
	.mj-column-per-33 { width:33.333333333333336%!important; }
}

. But in Gmail, other problem ---> Name class has been renamed :

<div class="m_-3012835233884925647mj-column-per-100 m_-3012835233884925647outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%">

Regards

Atch

Comicspidey · 2017-02-28T11:15:32Z

Hi,
I tested a MJML template with 3 and 4 columns.
I imported the same HTML version in Mailjet, Mailchimp and Litmus.

Résults :

With Mailjet -> no problem.
With MailChimp I've troubles. MJ-column doesn't work on Gmail (mj-column=100% all the time). No problem with Inbox by Gmail.
With Litmus, I have same troubles than Mailchimp for Gmail

iRyusa · 2017-02-28T13:40:34Z

Really weird @Comicspidey do you have the same results when sending it through putsmail ?

Comicspidey · 2017-02-28T14:30:35Z

@iRyusa No problem with putsmail.

I notice that when I use MailChimp, Google blocks all images by default. At this point, the arrangement looks good. But when I unblock the images, the column layout does not work.

When I use MailJet, Google doesn't block images.

edit: When I return to the emailing after opening it and unlocking the images, the layout works. It is only at the initial loading of the images that I have the problem of layout.

tonythecodeur · 2017-04-10T05:59:39Z

Hey everybody,

i read all the topic, and still didnt find an easy solution for this issue.. i thought mjml was the right solution for responsive template, but looks like it doesnt works that well..

EDIT by @ngarnier: I removed your code because the thread was then unreadable due to the lenght of your comment. Here's the template: https://mjml.io/try-it-live/HkvIq0Oae

I used my own interface to send the emailing (gwebmailing.fr), which i guess doesnt modified the code (the preview is well interpreted in my solution) , it looks fine in thunderbird and the reponsive is working, but gmail and outlook online , it doesnt at all.. i know emailing is quite tricky but i'm quite disappointed by the mjml solution, since if it doesnt work for gmail and outlook, it doesn't work for 50% of the targets..

Any help would be appreciated
thks in advance
AM
Thanks.

ngarnier · 2017-04-10T10:17:42Z

@tonythecodeur, the responsive is looking fine in Gmail, have a look at the preview in Litmus: https://litmus.com/checklist/emails/public/9242657#chromegmailnew. The issue must be with either your email sending platform or the version of Gmail you're using (for this, check https://litmus.com/blog/gmail-to-support-responsive-email-design). If it's the version of Gmail you're using, we can't do anything as responsive styles aren't supported (whether you're using MJML, HTML or any other solution).

About Outlook, the issue is happening only on Outlook.com, all others Outlook are fine, and as explained before there's no better alternative.

chaz1993 · 2017-06-15T14:09:01Z

Okay so I came across this same issue, and it's because the columns are relying on the media query within the header, if you export the HTML you will see '.mj-column-per-50 { width:50%!important; }, etc'. As mentioned above the head tags are removed so the media queries and styles won't be loaded for Outlook and Gmail - which causes the columns to break as it relies on the media queries to adjust the width.

My current solution is to avoid using columns, and just use tables otherwise you need to manually remove the width: 100% which just messes it up for mobile view. I was expecting the columns to work robustly but doesn't seem to meet my expectations.

This is a great idea, but please fix this!

ngarnier · 2017-06-15T14:51:37Z

hi @chaz1993, this is not totally accurate, especially as an MJML template is responsive on Gmail. If you see a mobile layout in Gmail, the issue is elsewhere: you can have a look at this comment to understand all the context of MJML, what happens in Gmail and Outlook.com, and what can be the origin of the issue in Gmail: #717 (comment).

Additional resources:

Gmail supporting head styles (including media queries): https://litmus.com/blog/gmail-to-support-responsive-email-design
Rendrering in Outlook.com: https://emails.hteumeuleu.com/what-you-need-to-know-about-the-new-outlook-com-8d2c54719398

pbsmultimedia · 2018-04-05T08:35:57Z

I had the same issue on gmail for work (did not happen on the personal/free version), after choosing "display images" the layout was breaking, columns became rows.
After some research, found out that some newsletters displayed images by default, the difference was that those images are served on a httpS connection, while those that are blocked, are on a normal http connection. Serving the images on a httpS connection fixed the issue to me!

ngarnier · 2018-04-05T08:37:24Z

Oh! Thanks for sharing that feedback @pbsmultimedia! 👍

kalakolors · 2018-05-24T10:14:59Z

Hey guys, its 2018 and I have the same issue here.. It went even further as it started to display columns as rows not only in GSuite Gmail, but also in Mailchimp itself, on Chrome browser.

Chrome screenshot:

Properly diplayed in other browser:

Is there any known solution to this? Reinstalling Chrome?
Thanks

iRyusa · 2018-05-24T10:44:35Z

Mailchimp is altering the HTML so there not so much we can do here. There's a way to upload the template without Mailchimp altering it but I don't remember how it works.

kalakolors · 2018-05-24T13:49:13Z

Thanks @iRyusa
I believe there is smth to do with Chrome, not Mailchimp - in Microsoft Edge it displays normally.
The other thing is that this is native Mailchimp template, built with its tool, not a custom one. It used to be alright before, the issue used to occure only in Gmail, but recently it started to show up the same way in Mailchimp while editing templates.

btw Chrome reinstal didn't work, the issue continues.

iRyusa · 2018-05-24T13:51:24Z

Chrome display it fine, send it through a simple service like putsmail.com you will see that your template should render just fine.

Can you explain a bit your workflow so we can identify what can cause your issue

iRyusa added the Gmail Desktop label Feb 8, 2016

iRyusa added the Cannot reproduce label Feb 8, 2016

iRyusa removed the Cannot reproduce label Feb 10, 2016

iRyusa changed the title ~~Columns breaks on Gmail~~ Columns breaks on Google Apps free account Feb 10, 2016

iRyusa changed the title ~~Columns breaks on Google Apps free account~~ Columns breaks on some Google Apps account Feb 10, 2016

erochersimplicite mentioned this issue Apr 29, 2016

Responsive problems facing mail gmail #207

Closed

iRyusa closed this as completed Apr 29, 2016

erochersimplicite mentioned this issue May 12, 2016

Gmail desktop Email Display the grid very bad #244

Closed

rickyngk mentioned this issue Jun 16, 2016

How to inject my own style into header's style tag? #304

Closed

JakeHenshall mentioned this issue Nov 25, 2016

Hubspot Email rendering issues #448

Closed

Columns breaks on some Google Apps account #24

Columns breaks on some Google Apps account #24

Comments

philippebarbosa commented Feb 7, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

philippebarbosa commented Feb 8, 2016

iRyusa commented Feb 8, 2016

joaopvilla commented Feb 8, 2016

iRyusa commented Feb 9, 2016

iRyusa commented Feb 9, 2016

philippebarbosa commented Feb 9, 2016

iRyusa commented Feb 9, 2016

philippebarbosa commented Feb 9, 2016

iRyusa commented Feb 10, 2016

philippebarbosa commented Feb 10, 2016

akacha commented Apr 29, 2016

iRyusa commented Apr 29, 2016

akacha commented Apr 29, 2016

freakintoddles2 commented May 13, 2016

rickyngk commented Jun 16, 2016

remidesroques commented Jul 4, 2016

jaypeedevlin commented Aug 22, 2016

JaimeHolland88 commented Feb 8, 2017

iRyusa commented Feb 8, 2017

JaimeHolland88 commented Feb 8, 2017

ngarnier commented Feb 8, 2017

Atchworks commented Feb 12, 2017

Comicspidey commented Feb 28, 2017

iRyusa commented Feb 28, 2017

Comicspidey commented Feb 28, 2017 • edited Loading

tonythecodeur commented Apr 10, 2017 • edited by ngarnier Loading

ngarnier commented Apr 10, 2017

chaz1993 commented Jun 15, 2017

ngarnier commented Jun 15, 2017

pbsmultimedia commented Apr 5, 2018 • edited Loading

ngarnier commented Apr 5, 2018

kalakolors commented May 24, 2018 • edited Loading

iRyusa commented May 24, 2018

kalakolors commented May 24, 2018

iRyusa commented May 24, 2018

Comicspidey commented Feb 28, 2017 •

edited

Loading

tonythecodeur commented Apr 10, 2017 •

edited by ngarnier

Loading

pbsmultimedia commented Apr 5, 2018 •

edited

Loading

kalakolors commented May 24, 2018 •

edited

Loading