search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.07k stars 962 forks source link

Columns breaks on some Google Apps account #24

Closed philippebarbosa closed 8 years ago

philippebarbosa commented 8 years ago

(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 : Image

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 commented 8 years ago

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 !

chromegmailnew-vertical-allowed-1366

chromegmailnew-vertical-allowed-1366 1

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

philippebarbosa commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

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

Here is the results :

image image

iRyusa commented 8 years ago

Mhh don't know what happens, using litmus and copy/pasted html from Try It Live I have this : capture d ecran 2016-02-08 a 12 34 48

Can Mailchimp alter the html?

philippebarbosa commented 8 years ago

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 commented 8 years ago

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

philippebarbosa commented 8 years ago

Done !

philippebarbosa commented 8 years ago

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

iRyusa commented 8 years ago

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 ?

capture d ecran 2016-02-08 a 14 20 33

philippebarbosa commented 8 years ago

Oh, well asked ! So, just tested :

Still breaking.

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

philippebarbosa commented 8 years ago

Example with Firefox :

Image

iRyusa commented 8 years ago

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 commented 8 years ago

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

iRyusa commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

Gmail:

screen shot 2016-02-08 at 16 18 22

Polymail:

screen shot 2016-02-08 at 16 18 16

Can anyone help me (again)? :p

iRyusa commented 8 years ago

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 commented 8 years ago

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

capture d ecran 2016-02-09 a 16 07 53

Thanks !

philippebarbosa commented 8 years ago

Link to the gist sent by mail !

iRyusa commented 8 years ago

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 commented 8 years ago

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

iRyusa commented 8 years ago

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

philippebarbosa commented 8 years ago

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

iRyusa commented 8 years ago

I re-rename the issue then, that's weird can you confirm if it's working on your personal address ?

philippebarbosa commented 8 years ago

Tried on a old free gmail account…it's working ! So weird.

joaopvilla commented 8 years ago

I'm using a paid account, Google Apps for Work :/ And this is happening in Hotmail to:

screen shot 2016-02-10 at 09 11 02
joaopvilla commented 8 years ago

@iRyusa here's the e-mail you sent me via Litmus:

screen shot 2016-02-10 at 09 53 33

And the "show original" content: 

Delivered-To: joao.mello@memed.com.br
Received: by 10.76.167.68 with SMTP id zm4csp1986684oab;
        Tue, 9 Feb 2016 01:57:02 -0800 (PST)
X-Received: by 10.37.40.10 with SMTP id o10mr17774289ybo.6.1455011822763;
        Tue, 09 Feb 2016 01:57:02 -0800 (PST)
Return-Path: <bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com>
Received: from mail64.us4.mandrillapp.com (mail64.us4.mandrillapp.com. [205.201.136.64])
        by mx.google.com with ESMTPS id u185si2207481ywg.178.2016.02.09.01.57.02
        for <joao.mello@memed.com.br>
        (version=TLS1_2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128);
        Tue, 09 Feb 2016 01:57:02 -0800 (PST)
Received-SPF: pass (google.com: domain of bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com designates 205.201.136.64 as permitted sender) client-ip=205.201.136.64;
Authentication-Results: mx.google.com;
       spf=pass (google.com: domain of bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com designates 205.201.136.64 as permitted sender) smtp.mailfrom=bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com;
       dkim=pass header.i=@users.litmus.com;
       dkim=pass header.i=@mandrillapp.com;
       dmarc=pass (p=REJECT dis=NONE) header.from=users.litmus.com
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed/relaxed; s=mandrill; d=users.litmus.com;
 h=From:Subject:To:Message-Id:Date:MIME-Version:Content-Type:Content-Transfer-Encoding; i=hello@users.litmus.com;
 bh=KUZyX+VmA24/fckDsa3w8z1/Y+o=;
 b=QcuMO2bazfKTJ1gXQoCJ7R87M3ofbBJPLclqV7jV9lrl53UewgYLe49t81xdKzxRcqrADzKK44z1
   CObbVjdI/59dciUFtZNleA8MtaF1a0j4R474dadF4jD42zxjaBYF/r3RY6dIgXjCRVwmsL5hovWU
   fd8C32Ofpft+R2U0mr4=
DomainKey-Signature: a=rsa-sha1; c=nofws; q=dns; s=mandrill; d=users.litmus.com;
 b=oukHdHLIeQVLYss8i9R9CS15ekeYXrCb09DVraUnCPuLRWLA2FqELDzVl+g1h4DdbwIlvP4wAHuI
   sUpeR7bLAHfCr/SvtHF5rJdXVXCV++j1Grx/EXm8D/+bsIpIl/LCvZslknzMjQK7TJ56BisMzn+c
   +xMdUKLt0CoFrEQLdH8=;
Received: from pmta03.dal05.mailchimp.com (127.0.0.1) by mail64.us4.mandrillapp.com id hn6rus174nok for <joao.mello@memed.com.br>; Tue, 9 Feb 2016 09:57:02 +0000 (envelope-from <bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com>)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=mandrillapp.com; 
 i=@mandrillapp.com; q=dns/txt; s=mandrill; t=1455011822; h=From : 
 Subject : To : Message-Id : Date : MIME-Version : Content-Type : 
 Content-Transfer-Encoding : From : Subject : Date : X-Mandrill-User : 
 List-Unsubscribe; bh=dsbhKbZdAm9f31cPmxY2mDb75Fiqv6qt1VePgyWiwXs=; 
 b=RoKC+agHy4BuiA7e94WleA8QYYGOGzf9/a3nyRA977de0W6AeOoInYWv1mlQOiFRkTR6Bl
 9umgGQya1GmAqGbM69jd6zbTVGvogNZN2A/9gwj6pfOP4G0AxtcRdRHVB2B1Q1L1vkn/+9yy
 5nU3rnilTIdhjpeH3WpH9nE5ZyByA=
From: Litmus Builder <hello@users.litmus.com>
Subject: Fix outlook
Return-Path: <bounce-md_14910703.56b9b7ee.v1-2b01ccf18b8a438a95945b877795fe7f@mc.users.litmus.com>
Received: from [199.182.121.45] by mandrillapp.com id 2b01ccf18b8a438a95945b877795fe7f; Tue, 09 Feb 2016 09:57:02 +0000
To: <joao.mello@memed.com.br>
Message-Id: <56b9b7ecf314e_182c3fe6196d733047833@app05.mail>
X-Report-Abuse: Please forward a copy of this message, including all headers, to abuse@mandrill.com
X-Report-Abuse: You can also report abuse here: http://mandrillapp.com/contact/abuse?id=14910703.2b01ccf18b8a438a95945b877795fe7f
X-Mandrill-User: md_14910703
Date: Tue, 09 Feb 2016 09:57:02 +0000
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<!doctype html>
<html xmlns=3D"http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8">
  <title>undefined</title>
  <style type=3D"text/css">

  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
    body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-=
size-adjust: 100%; }
    table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-=
rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-dec=
oration: none; -ms-interpolation-mode: bicubic; }
  p {
    display: block;
    margin: 13px 0;
  }

  </style>
  <!--[if !mso]><!-->
  <style type=3D"text/css">
    @import url(https://fonts.googleapis.com/css?family=3DUbuntu:400,500,70=
0,300);
  </style>
  <style type=3D"text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport { width:320px; }
      @viewport { width:320px; }
    }
  </style>
  <link href=3D"https://fonts.googleapis.com/css?family=3DUbuntu:400,500,70=
0,300" rel=3D"stylesheet" type=3D"text/css">
  <!--<![endif]-->
<style type=3D"text/css">
    @media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby=3D"mj-column-per-100"] { width:1=
00%!important; }
.mj-column-px-100, * [aria-labelledby=3D"mj-column-px-100"] { width:100px!i=
mportant; }
.mj-column-px-500, * [aria-labelledby=3D"mj-column-px-500"] { width:500px!i=
mportant; }
}</style>
<style type=3D"text/css">

</style>
</head>
<body id=3D"YIELD_MJML" style=3D""><div class=3D"mj-body"><!--[if mso]>
          <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"=
600" align=3D"center" style=3D"width:600px;"><tr><td>
          <![endif]--><div style=3D"margin:0 auto;max-width:600px;"><table =
class=3D"" cellpadding=3D"0" cellspacing=3D"0" style=3D"width:100%;font-siz=
e:0px;" align=3D"center"><tbody><tr><td style=3D"text-align:center;vertical=
-align:top;font-size:0;padding-top:20px;padding-bottom:20px;"><!--[if mso]>
      <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0"><tr><td style=
=3D"width:600px;">
      <![endif]--><div style=3D"vertical-align:top;display:inline-block;fon=
t-size:13px;text-align:left;" class=3D"mj-column-per-100" aria-labelledby=
=3D"mj-column-per-100"><table width=3D"100%"><tbody><tr><td style=3D"font-s=
ize:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:=
25px;" align=3D"center"><table cellpadding=3D"0" cellspacing=3D"0" style=3D=
"border-collapse:collapse;border-spacing:0px;" align=3D"center"><tbody><tr>=
<td><img alt=3D"" src=3D"https://uploads.intercomcdn.com/i/o/3708008/48c822=
6e3ab8b6eb9f9d5f1a/File1453135327278" style=3D"border:none;display:block;ou=
tline:none;text-decoration:none;max-width:165px;height:auto;" width=3D"165"=
 height=3D"auto"></td></tr></tbody></table></td></tr><tr><td style=3D"font-=
size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left=
:25px;" align=3D"left"><div class=3D"mj-content" style=3D"cursor:auto;color=
:#35BED4;font-family:Helvetica, Arial, sans-serif;font-size:30px;font-weigh=
t:100;line-height:36px;">Voc=C3=AA sabe quais foram as principais atualiza=
=C3=A7=C3=B5es de medicamentos?</div></td></tr><tr><td style=3D"font-size:0=
;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;=
" align=3D"left"><div class=3D"mj-content" style=3D"cursor:auto;color:#828C=
99;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;=
line-height:24px;">Na ultima semana, novos medicamentos foram registrados p=
ela Anvisa, entraram e sa=C3=ADram do mercado. Mas pode ficar tranquilo que=
 com a Memed voc=C3=AA est=C3=A1 sempre atualizado. :)</div></td></tr></tbo=
dy></table></div><!--[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso]>
      </td></tr></table>
          <![endif]-->
          <!--[if mso]>
          <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"=
600" align=3D"center" style=3D"width:600px;"><tr><td>
          <![endif]--><div style=3D"margin:0 auto;max-width:600px;"><table =
class=3D"" cellpadding=3D"0" cellspacing=3D"0" style=3D"width:100%;font-siz=
e:0px;" align=3D"center"><tbody><tr><td style=3D"text-align:center;vertical=
-align:top;font-size:0;padding-top:0px;padding-bottom:0px;"><!--[if mso]>
      <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0"><tr><td style=
=3D"width:100px;">
      <![endif]--><div style=3D"vertical-align:top;display:inline-block;fon=
t-size:13px;text-align:left;min-width:100px;" class=3D"mj-column-px-100" ar=
ia-labelledby=3D"mj-column-px-100"><table width=3D"100%"><tbody><tr><td sty=
le=3D"font-size:0;padding-top:12px;padding-bottom:10px;padding-right:25px;p=
adding-left:25px;" align=3D"center"><table cellpadding=3D"0" cellspacing=3D=
"0" style=3D"border-collapse:collapse;border-spacing:0px;" align=3D"center"=
><tbody><tr><td><img alt=3D"" src=3D"https://s3-sa-east-1.amazonaws.com/mem=
ed/icons/azul-generico.png" style=3D"border:none;display:block;outline:none=
;text-decoration:none;max-width:50px;height:auto;" width=3D"50" height=3D"a=
uto"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso]=
>
      </td><td style=3D"width:500px;">
      <![endif]--><div style=3D"vertical-align:top;display:inline-block;fon=
t-size:13px;text-align:left;min-width:500px;" class=3D"mj-column-px-500" ar=
ia-labelledby=3D"mj-column-px-500"><table width=3D"100%"><tbody><tr><td sty=
le=3D"font-size:0;padding-top:10px;padding-bottom:0px;padding-right:25px;pa=
dding-left:0px;" align=3D"left"><div class=3D"mj-content" style=3D"cursor:a=
uto;color:#35BED4;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-siz=
e:10px;line-height:22px;">Pfizer</div></td></tr><tr><td style=3D"font-size:=
0;padding-top:0px;padding-bottom:5px;padding-right:25px;padding-left:0px;" =
align=3D"left"><div class=3D"mj-content" style=3D"cursor:auto;color:#828C99=
;font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:400;li=
ne-height:22px;">Inlyta 1mg, Comprimido revestido (28 un)</div></td></tr><t=
r><td style=3D"font-size:0;padding-top:0px;padding-bottom:10px;padding-righ=
t:25px;padding-left:0px;" align=3D"left"><div class=3D"mj-content" style=3D=
"cursor:auto;color:#828C99;font-family:Helvetica, Arial, sans-serif;font-si=
ze:14px;font-weight:400;line-height:24px;"><em style=3D"color: #ccc;font-si=
ze: 12px;padding: 2px 5px;background: #FFF;border-radius: 4px; border: soli=
d 1px #ccc;">Neoplasia renal</em> Indicado para pacientes adultos com diagn=
=C3=B3stico de carcinoma de c=C3=A9lulas renais avan=C3=A7ado de c=C3=A9lul=
as claras.</div></td></tr><tr><td style=3D"font-size:0;padding-top:0px;padd=
ing-bottom:10px;padding-right:25px;padding-left:0px;" align=3D"left"><div c=
lass=3D"mj-content" style=3D"cursor:auto;color:#828C99;font-family:Helvetic=
a, Arial, sans-serif;font-size:12px;font-weight:400;line-height:24px;"><i c=
lass=3D"registrado" style=3D"color: white;font-size: 12px;padding: 2px 5px;=
background: #CEC224;border-radius: 4px;">Registrado Anvisa</i> Este medicam=
ento foi registrado pela ANVISA e em breve estar=C3=A1 dispon=C3=ADvel para=
 prescri=C3=A7=C3=A3o pela Memed.</div></td></tr><tr><td style=3D"font-size=
:0;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;=
"><p class=3D"" style=3D"font-size:1px;border-top:1px solid lightgrey;width=
:100%;"></p><!--[if mso]><table style=3D"font-size: 1px; border-top: 1px so=
lid lightgrey; width: 100%;"></table><![endif]--></td></tr></tbody></table>=
</div><!--[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso]>
      </td></tr></table>
          <![endif]-->
          <!--[if mso]>
          <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"=
600" align=3D"center" style=3D"width:600px;"><tr><td>
          <![endif]--><div style=3D"margin:0 auto;max-width:600px;"><table =
class=3D"" cellpadding=3D"0" cellspacing=3D"0" style=3D"width:100%;font-siz=
e:0px;" align=3D"center"><tbody><tr><td style=3D"text-align:center;vertical=
-align:top;font-size:0;padding-top:0px;padding-bottom:0px;"><!--[if mso]>
      <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0"><tr><td style=
=3D"width:100px;">
      <![endif]--><div style=3D"vertical-align:top;display:inline-block;fon=
t-size:13px;text-align:left;min-width:100px;" class=3D"mj-column-px-100" ar=
ia-labelledby=3D"mj-column-px-100"><table width=3D"100%"><tbody><tr><td sty=
le=3D"font-size:0;padding-top:12px;padding-bottom:10px;padding-right:25px;p=
adding-left:25px;" align=3D"center"><table cellpadding=3D"0" cellspacing=3D=
"0" style=3D"border-collapse:collapse;border-spacing:0px;" align=3D"center"=
><tbody><tr><td><img alt=3D"" src=3D"https://s3-sa-east-1.amazonaws.com/mem=
ed/icons/azul-generico.png" style=3D"border:none;display:block;outline:none=
;text-decoration:none;max-width:50px;height:auto;" width=3D"50" height=3D"a=
uto"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso]=
>
      </td><td style=3D"width:500px;">
      <![endif]--><div style=3D"vertical-align:top;display:inline-block;fon=
t-size:13px;text-align:left;min-width:500px;" class=3D"mj-column-px-500" ar=
ia-labelledby=3D"mj-column-px-500"><table width=3D"100%"><tbody><tr><td sty=
le=3D"font-size:0;padding-top:10px;padding-bottom:0px;padding-right:25px;pa=
dding-left:0px;" align=3D"left"><div class=3D"mj-content" style=3D"cursor:a=
uto;color:#35BED4;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-siz=
e:10px;line-height:22px;">Pfizer</div></td></tr><tr><td style=3D"font-size:=
0;padding-top:0px;padding-bottom:5px;padding-right:25px;padding-left:0px;" =
align=3D"left"><div class=3D"mj-content" style=3D"cursor:auto;color:#828C99=
;font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:400;li=
ne-height:22px;">Inlyta 1mg, Comprimido revestido (28 un)</div></td></tr><t=
r><td style=3D"font-size:0;padding-top:0px;padding-bottom:10px;padding-righ=
t:25px;padding-left:0px;" align=3D"left"><div class=3D"mj-content" style=3D=
"cursor:auto;color:#828C99;font-family:Helvetica, Arial, sans-serif;font-si=
ze:14px;font-weight:400;line-height:24px;"><em style=3D"color: #ccc;font-si=
ze: 12px;padding: 2px 5px;background: #FFF;border-radius: 4px; border: soli=
d 1px #ccc;">Neoplasia renal</em> Indicado para pacientes adultos com diagn=
=C3=B3stico de carcinoma de c=C3=A9lulas renais avan=C3=A7ado de c=C3=A9lul=
as claras.</div></td></tr><tr><td style=3D"font-size:0;padding-top:0px;padd=
ing-bottom:10px;padding-right:25px;padding-left:0px;" align=3D"left"><div c=
lass=3D"mj-content" style=3D"cursor:auto;color:#828C99;font-family:Helvetic=
a, Arial, sans-serif;font-size:12px;font-weight:400;line-height:24px;"><i c=
lass=3D"registrado" style=3D"color: white;font-size: 12px;padding: 2px 5px;=
background: #CEC224;border-radius: 4px;">Registrado Anvisa</i> Este medicam=
ento foi registrado pela ANVISA e em breve estar=C3=A1 dispon=C3=ADvel para=
 prescri=C3=A7=C3=A3o pela Memed.</div></td></tr></tbody></table></div><!--=
[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso]>
          </td></tr></table>
          <![endif]--></div></body>
</html>
iRyusa commented 8 years ago

A fix will be proposed by @hteumeuleu for outlook in few days, they've change to outlooke 365 render engine so mails are shown in mobile version

Thanks too @joaopvilla we're still looking for a way to reproduce with our google apps accounts

caseymhunt commented 8 years ago

I am encountering a situation where Gmail (Apps, Chrome, Desktop) is not obeying any column width declaration, explicit or calculated automatically by MJML. Every column is 100% width regardless.

Happy to attach whatever code you need here, to help isolate.

EDIT: FWIW, manipulating the min-width declaration in the HTML to a max-width declaration forces Gmail to render columns correctly but of course disables responsiveness to 100% width on mobile devices.

CourtFantinato commented 8 years ago

I am experiencing the same issue in Gmail for Business/Work, where columns are displaying stacked at 100% width. However, it's fine in my personal Gmail account.

Gmail strips Classes and IDs from the HTML, but does support styles in the <head>. So you can get the columns to work with using other attributes like lang or aria-labelledby. However, Gmail for Business/Work (as well as the Gmail mobile app) doesn't support styles in the <head> at all, so the work around using other HTML attributes doesn't work.

One way around it is to use max-width with the fluid hybrid method, however this will break the fully 100% width fluid responsiveness in the Gmail app that you currently have working right now, making the columns stack in the middle with a fixed max-width (which looks fine on smaller devices, but noticeable on bigger ones).

erochersimplicite commented 8 years ago

Hi everyone, I'm experiencing the same problem. I've tried with two separate domain Gmail for Business but the problem is still the same. It works on traditional reader like Apple Mail and/or free @gmail email but not on Gmail for Business/Work (columns are break)

As @caseymhunt said "Happy to attach whatever code you need here, to help isolate." :)

EDIT : Is there any "move" on this issue :/ ? As we send lot of email to gmail for work it's a bit complicated for us to use it Passport in mailjet (wich use mjml if I make no mistake ? )

akacha commented 8 years ago

@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 commented 8 years ago

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

akacha commented 8 years ago

:/ Thank you

freakintoddles2 commented 8 years ago

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

rickyngk commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 .

screen shot 2017-02-08 at 16 33 09
ngarnier commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

Comicspidey commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.