Mjml: Mobile version displayed in some clients
In my Litmus testing I found that in:
Polymail
Outlook Web App
The columns that were meant to be 50% width were stacking as 100% columns.
rgbjay
All 90 comments
Hi @rgbjay, thanks for reaching out!
About the first 4 clients, we'll run some test to understand better what's going on here.
About Google Apps, please refer to #24. It seems that there is some versions of it out here which render things in a wrong way. So far we haven't managed to reproduce it on our own Google Apps (or Gmail) accounts but still looking for new cases, if you could add details about yours into the list.
Keep you posted on our progress.
arnaudbreton
on 12 Feb 2016
I have the same render issues using Litmus as well. These desktop clients are showing a mobile version :/
Edit:
I would also add outlook.com and office365, they have the same behaviour, showing mobile version on desktop. This might be related to screen sizes?
epayet
on 29 Feb 2016
+1
VinceVachon
on 3 Mar 2016
Has anyone figured out a workaround for this issue in the meantime?
strukturedkaos
on 3 Mar 2016
Hey guys, sorry for the delay in the answers here.
After digging into that issue, it turns out the Outlook Webmail 2016 behaviour won't allow us to support both and desktop and mobile render. For that reason, we decided it would be better for MJML users to go for the mobile rendering, leading to a great render on mobile devices and still decent one on desktop.
About Google Apps, we still haven't figured out what is the exact reason of the issue for some versions of the client. Please watch #24 to get the last updates about this issue.
Apologies for the inconvenience!
Closing this issue for now.
arnaudbreton
on 1 Apr 2016
Updated the issue to close some
iRyusa
on 29 Apr 2016
I can reliably reproduce the Google Apps for Business desktop rendering emails displaying as mobile and non apps for business where it renders as expected. I may take a deeper dive when I have more free time. Does anyone else have more information regarding this bug?
http://imgur.com/pELSirr
g0ddish
on 29 Apr 2016
Ok, I found a CSS rule that is being passed to regular gmail but not business apps. It looks like a style tag is being passed in one but not the other which is odd because I was under the impression that gmail strips all style tags from all emails.
Offending div
Css belonging to div
So this second style tag wasn't stripped from regular gmail but was from business; maybe this is an issue with gmail?
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
}
</style>
Closed by mistake, reopened sorry
@g0ddish Yes, media queries are being totally removed from google apps gmail for unknown reason :/
iRyusa
on 2 May 2016
Same issue here with the early versions of outlook (lte 2003) showing single column.
dalefish
on 3 May 2016
I've found a dirty solution to change the % of the column from 100% to lets say 300px or whatever the column width is
for example:
<div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:bottom;display:inline-block;font-size:13px;text-align:left;width:300px;"> where 300px was originally 100%;
So far it works for everything but Lotus Notes 8.5 and Outlook 2003.
lRlevolution
on 18 May 2016
@lRlevolution but it will break the mobile first approach sadly
iRyusa
on 18 May 2016
Update: We're waiting for #227 to be merged to suppport Lotus Notes 8.5, Outlook 2000, Outlook 2002, Outlook 2003
iRyusa
on 18 May 2016
Update removing older outlook since 2.1.1 got fix for them
Outlook 2000
Outlook 2002
Outlook 2003
iRyusa
on 26 May 2016
This issue also affects major inbox provider in Czech republic Seznam.cz with @email.cz, @seznam.cz, @post.cz)
Tlapi
on 21 Jun 2016
My solution:
Replace attrs on mj-column with pixels if there is more than 1 column.
Add this media query:
@media only screen and (min-width:480px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:33%!important; }
}
@media only screen and (max-width:480px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
}
Tested on EOA, works great on every device.
Just a minor issue is that 3 cols get stacked as 2 + 1.
Tlapi
on 21 Jun 2016
I don't really understand your point @Tlapi :
@media only screen and (min-width:480px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:33%!important; }
}
is what MJML is generating, right ?
You're adding this:
@media only screen and (max-width:480px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
}
But every column already have a width of 100% by default so I don't understand why you want to add them ?
iRyusa
on 21 Jun 2016
@iRyusa Yes, that's why in some cases you see mobile version on desktop. That's why i have replaced mj-column width attribute with pixels, if there is more than one column. If there is only one column, it remains 100%. And I'm adding:
@media only screen and (max-width:480px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
}
For our products-heave newsletters we cant allow to get all the content stacked in one column on the desktop.
Tlapi
on 21 Jun 2016
So you're removing width: 100% on mj column but adding them with a media query.
Problem is most of mobile clients doesn't support media queries and will be completely unreadable ?
iRyusa
on 21 Jun 2016
No, it will stack anyway ;-)
Only thing is that 3 columns get displayed as 2 + 1
I'll post a EOA test result.
Tlapi
on 21 Jun 2016
Tlapi
on 21 Jun 2016
On a clients with poor css support it gets stacked bud its not pixel perfect. There are some glitches.
But i prefer this solution over the one where you see mobile version on desktop.
Tlapi
on 21 Jun 2016
As expected the render on gmail Android is broken https://www.emailonacid.com/app/acidtest/display/result/QGxXVnhYvmovkzLbl6fNKVbHZ4LtZk3dNZWiBfOyl68ch/72/shared/ 3 column and 4 columns should appears as stacked not like that
iRyusa
on 21 Jun 2016
Yes, that's what i was talking about. On Android Gmail:
3 columns goes as 2 + 1
4 columns goes as 2 + 2
I'm okay with that. I don't mean it as this should be released, but maybe this could be an option. Something like fixedwidth="true"
In here, we have like 50% of our recipients on a webclient which is rendered as a mobile on desktop (like gmail for bussiness) right now. So this solution suits us better.
Tlapi
on 22 Jun 2016
this is not working on gmail in the browser either. columns are completely broken. it looks like the media query rules are ignored completely. even if i move them into the mobile query
all of the solutions of editing the generated html are hacks that make it hard to maintain the markup since you have to edit it every time you run mjml...
is there any progress on this?
gad2103
on 14 Jul 2016
@gad2103 Are you 100% sure you're using gmail and not google apps gmail ? Columns are fine in my personal gmail inbox
iRyusa
on 14 Jul 2016
stupid question...
how do i know?
On Thu, Jul 14, 2016 at 5:03 PM, Maxime Brazeilles <[email protected]
wrote:
@gad2103 https://github.com/gad2103 Are you 100% sure you're using
gmail and not google apps gmail ? Columns are fine in my personal gmail
inbox—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/40#issuecomment-232791705, or mute
the thread
https://github.com/notifications/unsubscribe/AA_zERPN8EbB4sQbM5TMiToDGaGTSIPJks5qVqQWgaJpZM4HXZXx
.
[image: photo]
_Gabriel Duncan_
Developer, co{de}signed
p:347-829-7122 | e:[email protected]
DISCLAIMER: This is a notification that this email is automatically return
receipt enabled. Upon opening this email, notification is sent to the
sender confirming that it has been viewed.
gad2103
on 14 Jul 2016
Is it your personnal gmail account, or a "company" account
iRyusa
on 15 Jul 2016
oh man. its a company account. why?!!! this is so annoying. i'm using an ugly hack to get around this. sorry. i'm just repeating known issues...
gad2103
on 15 Jul 2016
Edited: added Outlook Web App via #335
Note that Outlook Web App behaviour is shared on mobile and on desktop, we can't support both due to lack of media query support. We prefer to show the mobile version in desktop instead of desktop version in mobile to be more consistent with the other clients
iRyusa
on 20 Jul 2016
@iRyusa: This may have been reviewed already, but this technique does not require media queries for responsiveness: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919.
As far as I see it, the problem with these mailclients is the lack of support for media queries which comes with MJML to add responsiveness. Would it be possible to research this approach for responsiveness?
iainvdw
on 26 Jul 2016
I think it could be used, but it looks to have a big impact. We might consider it, but we need to fully understand it and see if all current features could be used with this technique
iRyusa
on 26 Jul 2016
Any updates on a fix?
patrickml
on 15 Aug 2016
@patrickml no trick has been found yet to have "media queries" like for google app gmail.
iRyusa
on 16 Aug 2016
Hey everyone, exciting times for gmail! I haven't done any testing yet but this was announced
g0ddish
on 16 Sep 2016
Hope they'll update both inbox and google apps gmail too
iRyusa
on 16 Sep 2016
"The update actually includes a number of similar but distinct email clients: Google’s three webmail clients Gmail, Inbox, and Google Apps, Gmail on iOS and Android, and Inbox on iOS and Android."
Tlapi
on 16 Sep 2016
Good news, as responsive design is being rolled out by Gmail, the mobile version is already not displayed anymore on Inbox. Hopefully the others will follow quickly!
Updating the list
ngarnier
on 3 Oct 2016
Updating Google Apps name to G Suite ... still no support for media queries / aria hack here
iRyusa
on 6 Oct 2016
Until some days ago, my coworker never saw this bug on GoogleApps. Now, she sees.
robsonsobral
on 6 Oct 2016
Following feedbacks and Litmus tests, it seems the G Suite update was generally rolled out which means the desktop version is correctly displayed, I updated the list of email clients.
@robsonsobral, can you confirm it's fixed for your colleague too?
ngarnier
on 31 Oct 2016
@ngarnier , I'm sorry about the delay. We've been really busy.
Not only it isn't fixed, as now she sees the mobile version even on GMAIL.
robsonsobral
on 7 Nov 2016
Hi @robsonsobral, that's really surprising as it's the opposite of what we've seen. Could you please open a dedicated issue with all the information needed (you can follow this guide as an inspiration).
ngarnier
on 10 Nov 2016
Can you send me (and her) the test you're using?
I gonna check the code she is using too, before to open a new issue.
robsonsobral
on 10 Nov 2016
Hey @robsonsobral, here is the example with 2 columns:
MJML:
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-image width="100" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Left column</mj-text>
</mj-column>
<mj-column>
<mj-image width="100" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Right column</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
You can see that the columns are displayed properly:
Gmail:
Google Apps / G Suite:
ngarnier
on 10 Nov 2016
Please, @ngarnier , forgive my delay. We were really busy here.
Your test works fine. Our code, doesn't. So, it's probably our fault. I gonna debug it.
Thank you for your patience.
robsonsobral
on 21 Nov 2016
If you're experiencing this issue and you also happen to be using Rails with the premailer-rails gem, you need to disable it for mjml generated emails by passing the skip_premailer: true option to mail, as described in their docs here.
dmchoull
on 8 Dec 2016
I have the same issue. Columns, that were meant to be 50% width were stacking as 100% columns.
This issue shows only in webmails - Yandex, Mail.ru, GMail and etc.
The solution is simple: insert in rendered inline div style 'max-width:
I modified /mjml-column/lib/index.js to do this. So, It is necessary to make a pull-request, but I can do it much later, because using old version 3.1.1 :(
Solution spend in Email on Acid.
boligolov
on 9 Jan 2017
By doing so you'll break the mobile first approach, I don't think this is a viable solution. How do you send your email ? @boligolov
From what we test it looks like G Suite is now behaving correctly ? I'm not sure about Yandex & Mail.ru because it's not in our scope of testing.
iRyusa
on 9 Jan 2017
Letters sended from Thunderbird (insert HTML) and from mass-mailling service UniSender.
I tested letters in native Android-applications (gmail, mail.ru, yandex), in Android Chrome browser and they shows correctly... some issues has only Yandex mail client - version from Thunderbird and UniSender displayed differently. The rest of the letters are displayed correctly, but, of course, it must be seriously tested :)
I'll test new version and say, how is behaving.
Thank you for such a quick response! :)
boligolov
on 9 Jan 2017
Well don't send email through a mail client because it will alter the HTML. I don't know about UniSender so I don't know if it has the same bug as MailChimp that sometime alters the HTML before sending it cf https://github.com/mjmlio/mjml/issues/454.
I highly recommend to use service like putsmail to send test email to be sure that the email is not altered in any way
iRyusa
on 9 Jan 2017
Ok, I understood, thank you! For putsmail - especially! :)
boligolov
on 9 Jan 2017
I have the same problem in Outlook, and I think I found the solution.
When you add width = "70%" into a column you get 70% to the class "x_mj-column-per-70 '.
But output column (div with class x_mj-column-per-70) have width 100%.
If you add the same width value, such as my column width preparity to class and to column width it
shuld work I think.
plaskaw
on 2 Feb 2017
@plaskaw Hi there, which version of outlook ? By doing so you're breaking the mobile version. So it will be no longer responsive on any device.
iRyusa
on 2 Feb 2017
Outlook from browser Office 365 package. I know i broke mobile. It's mobile first but if you change min-width to max-width on mobile and add 100% !important for columns on mobile wich i will do, i shuld work i think.
plaskaw
on 2 Feb 2017
Well, we don't want to break the mobile first approach. Adding media queries to handle mobile version will break some clients.
iRyusa
on 2 Feb 2017
Hi, I am unable to find a workaround to this issue as well. My mj-columns that are meant to be 50% width ( or any column width that is not 100%) are rendering as if they were 100% when I send in a test email. I think this is a gmail problem because it looks fine on my Macbook’s Mail app, but it does not look good on my personal gmail nor mobile. What I did to try to fix it was alter the generated HTML by changing the style of the div tag that has the mj-column.
So: <div class="mj-column-per-50 outlook-group-fix" style=”vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;”>
becomes <div class="mj-column-per-50 outlook-group-fix" style=”vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;**width:300px;**”>
This is kind of a dirty solution that at least fixes the problem in gmail, but not on mobile, and it breaks the mjml mobile first approach - or something like that. So it’s not exactly the best solution.
I’ve been searching for an answer on this thread and others but I haven’t been able to get anywhere. It would be great to find a way to fix this :) also gmail supports media queries now so I don't think it is a media query problem.
JaimeHolland88
on 10 Feb 2017
hey @JaimeHolland88, as answered here, there are only 2 explanations if the mobile layout is shown on Gmail:
- The version of Gmail in which the email is read doesn't support responsive styles (see this Litmus post)
- You're sending the email through a service that alters the HTML and break the styles
Other than that, MJML emails are responsive on Gmail. If you're convinced your problem is not due to one of these reasons, please open an issue and provide as much information as possible, following this template
Cheers!
ngarnier
on 10 Feb 2017
Thanks @ngarnier I used the putsmail app to send the email test.
JaimeHolland88
on 10 Feb 2017
@arnaudbreton ,
Quoting your statement from last year "After digging into that issue, it turns out the Outlook Webmail 2016 behaviour won't allow us to support both and desktop and mobile render. For that reason, we decided it would be better for MJML users to go for the mobile rendering, leading to a great render on mobile devices and still decent one on desktop."... So a year later, is there any good news? or still no workaround?
My emails are very desktop-outlook, I'm hoping to add in charts...So actually desktop version will serve better. Any recommendations?
Thanks,
Susie
xiaomaosusie
on 5 May 2017
Hey @xiaomaosusie, sorry for the late answer, missed your comment here.
You can use the [owa] selector to target the OWA email client. You'd have to tweak the HTML output (or make your own fork of MJML) to apply the desktop styles to that selector. Note that there's no distinction possible between OWA mobile and OWA desktop (that's the origin of the problem and why we're showing the mobile version on it).
You'll find more information about it and its quirks here: https://emails.hteumeuleu.com/what-you-need-to-know-about-the-new-outlook-com-8d2c54719398
ngarnier
on 26 May 2017
@ngarnier tried your code, unfortunately, it works only until I click "show images" in Gmail. Then it switches to mobile view. The strange part of this is that when I go back and open that email once again, now it shows OK, it's in desktop view.
Very strange behavior of Gmail.
ckissi
on 13 Jun 2017
Thanks for the answer @ckissi, indeed it's a weird behaviour from Gmail, we don't really have any way (or don't know how) to avoid that.
ngarnier
on 13 Jun 2017
Same issue here :/
Before clicking "Display images below"
After clicking Display images below, I get this:
Not even sure why gmail not showing images at all. Seems to me that Gmail is stripping mj-column-per-33 styles contained in the media query after I "Display images below" is clicked.
This whole block is gone after the fact
<style>div.m15cd74091fa19925 #m_8095357561683910313outlook a{padding:0}div.m15cd74091fa19925 .m_8095357561683910313ReadMsgBody{width:100%}div.m15cd74091fa19925 .m_8095357561683910313ExternalClass{width:100%}div.m15cd74091fa19925 .m_8095357561683910313ExternalClass *{line-height:100%}div.m15cd74091fa19925 body{margin:0;padding:0}div.m15cd74091fa19925 table,div.m15cd74091fa19925 td{border-collapse:collapse}div.m15cd74091fa19925 img{border:0;height:auto;line-height:100%;outline:none;text-decoration:none}div.m15cd74091fa19925 p{display:block;margin:13px 0}@media only screen and (min-width:480px){div.m15cd74091fa19925 .m_8095357561683910313mj-column-per-100{width:100%!important}div.m15cd74091fa19925 .m_8095357561683910313mj-column-per-50{width:50%!important}div.m15cd74091fa19925 .m_8095357561683910313mj-column-per-33{width:33.333333333333336%!important}}</style>
After I open the email again. The 3 columns look just as they supposed to. Very strange
maherelaridi
on 24 Jun 2017
Hello @maherelaridi
This is a known issue on Gmail and no one found out a workaround yet you can read more about this here : https://github.com/hteumeuleu/email-bugs/issues/24
iRyusa
on 26 Jun 2017
It seems that if mjml won't find a dirty hack (probably along with forgetting about principles), then it will be a bit useless since it won't provide responsiveness to most email clients due to their bugs.
It looks similar to the issue with tables in emails - we wish we could get rid of them but that's probably never gonna happen.
In our project we loved mjml in the beginning but then we sadly had to revert back to one-size-fits-all approach due to gmail and other clients.
pjar
on 27 Jul 2017
It looks like MJMLl works after using the advise from @dmchoull. We are using Rails and turning premailer off was the solution for us.
pjar
on 27 Jul 2017
@Tlapi Seznam.cz doesnt support media query. I tried your solution but it isnt working.
lsegeta
on 17 Aug 2017
Hello! How can I disable the adaptation in letters? So that in the main customers the blocks are not 100% stretched, and then the pancake is too broken off this
kostyasb
on 21 Dec 2017
@kostyasb, 2 options:
- The emails clients you're opening the email on don't support media queries
- The platform you use to send emails alter the HTML and breaks the responsiveness
It's impossible to help you without more information.
ngarnier
on 21 Dec 2017
@ngarnier, The client on which I opened the mail from Yandex (in Russia, one of the largest postal services), I send it via the SendSay.ru platform (maybe it breaks, but I can not refuse it), tomorrow I'll try to send it through Thunderbird, I'll unsubscribe. While the issue was solved simply by the DIV's
Клиент на котором открывал - почта от Яндекса (в России один из крупнейших почтовых сервисов), отправку делаю через платформу SendSay.ru (возможно она ломает, но от неё тоже не могу отказаться), завтра попробую отправить через Thunderbird, отпишусь. Пока решил вопрос просто дивами
kostyasb
on 21 Dec 2017
Yandex doesn't support media queries, at least from my testing
On 21 Dec 2017 18:46, "Konstantin" notifications@github.com wrote:
@ngarnier https://github.com/ngarnier, The client on which I opened the
mail from Yandex (in Russia, one of the largest postal services), I send it
via the SendSay.ru platform (maybe it breaks, but I can not refuse it),
tomorrow I'll try to send it through Thunderbird, I'll unsubscribe. Whilethe issue was solved simply by the DIV's
Клиент на котором открывал - почта от Яндекса (в России один из крупнейших
почтовых сервисов), отправку делаю через платформу SendSay.ru (возможно она
ломает, но от неё тоже не могу отказаться), завтра попробую отправить через
Thunderbird, отпишусь. Пока решил вопрос просто дивами—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/40#issuecomment-353413468, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLOC0EW9D0gtWk3VcAvvy80XGPNKSKks5tCplxgaJpZM4HXZXx
.
dalefish
on 21 Dec 2017
@dalefish, Yandex supports additivity:
Desktop: http://skrinshoter.ru/s/211217/Jbo29FB2?a
Mobile: http://skrinshoter.ru/s/211217/Vo5c8G2y?a
kostyasb
on 21 Dec 2017
My layout
It should be: http://skrinshoter.ru/s/211217/SbhYYHsK?a
How it turned out: http://skrinshoter.ru/s/211217/p28PjYgy
kostyasb
on 21 Dec 2017
In Outlook, too, everything is floating, in general, decided to switch to native layout
kostyasb
on 22 Dec 2017
We've come a long way since the time where a mobile layout was displayed instead of a desktop layout in several clients so that we needed that issue to reference them.
As we now offer a way to display a desktop layout on outlook.com, MJML will not display a mobile layout instead of a desktop layout on a any major email client.
For issues with specific local email clients, please open a dedicated issue.
ngarnier
on 28 Feb 2018
@ngarnier I've tried test from test.js with mjml-core: 4.0.0 and there still is problem in outlook:
https://www.emailonacid.com/app/acidtest/YkWZ1K08vMJYVlmJTTX3Q9TmWhbyyJ1tgTzpFDiWToPnw/list
Or is this about some other version?
Tlapi
on 28 Feb 2018
@Tlapi you need to add owa="desktop" on <mjml> (more about it here).
ngarnier
on 28 Feb 2018
@ngarnier Ah, I see. In test.js there is owa_desktop="true" ;-)
Tlapi
on 28 Feb 2018
I am seeing this problem in Outlook.com. It appears the mj-column-per-33 class is getting prefixed to x_mj-column-per-33 but the class doesn't seem to exist.
I am using the MJML app and sending using the sending functionality in the app via a MailJet account
Offending code
<mj-section padding="0">
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/6b/89/ant-colony-pos-461663.jpg" title="asset_1_title" alt="asset_1_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/1f/a5/523109.jpg" title="asset_2_title" alt="asset_2_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/bf/b9/528094.jpg" title="asset_3_title" alt="asset_3_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
</mj-section>
Also, is there any new info regarding fixing this issue in Gmail?
Thanks in advance, keep up the great work!
ianperrettive
on 11 May 2018
You have an attribute for outlook.com to add in mjml in order to have the
desktop verison in outlook.com, and there's no more issue in gmail what are
you talking about ?
On Fri, May 11, 2018 at 5:31 PM Ian Perrett notifications@github.com
wrote:
I am see this problem in Outlook.com. It appears the mj-column-per-33
class is getting prefixed but the class doesn't seem to exist.I am using the MJML app and sending using the sending functionality in the
app via a MailJet account[image: screen shot 2018-05-11 at 15 31 18]
https://user-images.githubusercontent.com/289628/39931607-d16bf6d4-5535-11e8-95cf-d81067355c30.png
Offending code<mj-section padding="0"> <mj-column width="33%" padding="12px"> <mj-image src="https://www.scholastic.co.uk/assets/a/6b/89/ant-colony-pos-461663.jpg" title="asset_1_title" alt="asset_1_alt" href="https://resource-bank.scholastic.co.uk"></mj-image> </mj-column> <mj-column width="33%" padding="12px"> <mj-image src="https://www.scholastic.co.uk/assets/a/1f/a5/523109.jpg" title="asset_2_title" alt="asset_2_alt" href="https://resource-bank.scholastic.co.uk"></mj-image> </mj-column> <mj-column width="33%" padding="12px"> <mj-image src="https://www.scholastic.co.uk/assets/a/bf/b9/528094.jpg" title="asset_3_title" alt="asset_3_alt" href="https://resource-bank.scholastic.co.uk"></mj-image> </mj-column> </mj-section>Also, is there any new info regarding fixing this issue in Gmail?
Thanks in advance, keep up the great work!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/40#issuecomment-388398884, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzR1vOAisnqdbnhGV69Yiz-5r6mfhks5txa7MgaJpZM4HXZXx
.
--
Cordialement,
Maxime BRAZEILLES
iRyusa
on 11 May 2018
@iRyusa sorry, didn't see that, however when I add owa="desktop" to the <mjml> tag in the MJML app the preview goes blank? - Found the work around here https://github.com/mjmlio/mjml-app/issues/234
re Gmail issue, where it stacks the columns on initial open. I have tried using the new version of Gmail but still get the same problem (https://github.com/hteumeuleu/email-bugs/issues/24)
ianperrettive
on 11 May 2018
Bug has been fixed in the new gmail. For blank page add a <mjml></mjml> at the starts of the file it should work
On 11 May 2018, at 17:50, Ian Perrett notifications@github.com wrote:
@iRyusa sorry, didn't see that, however when I add owa="desktop" to the
tag in the MJML app the preview goes blank? re Gmail issue, where it stacks the columns on initial open. I have tried using the new version of Gmail but still get the same problem (hteumeuleu/email-bugs#24)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
iRyusa
on 11 May 2018
Thanks, got Outlook.com working. I am using the new version of Gmail but I am still seeing the columns stack.
ianperrettive
on 14 May 2018
How did you send your email ? Try to reproduce with putsmail.com without inline style checked. And if It works then your ESP is altering the HTML
iRyusa
on 14 May 2018
OK, It worked with Putsmail.com. I was using the MJML app linked to a MailJet account to send the emails, assumed that would be the bests combination.
ianperrettive
on 14 May 2018
Very weird, the MJML app doesn't alter the HTML nor does the Mailjet API. Can you please share the MJML app version you're using as well as the full markup @ianperrettive ? Very curious, I'd like to dig more.
ngarnier
on 14 May 2018
Here you go, hope it helps:
MJML App v2.8.0 (It said I was downloading 2.9 and the file was named 2.9)
MJML v^4.0.3
<mjml></mjml> <!-- work around as owa attr on mjml tag breaks email -->
<mjml owa="desktop">
<mj-head>
<mj-attributes>
<mj-section background-color="#ffffff" padding="24px 12px 0 12px"/>
<mj-text color="#282828" font-size="16px" line-height="24px"/>
<mj-button background-color="#6eb928" color="#ffffff" font-size="20px" border-radius="0" />
<mj-all padding="0" font-family="Helvetica,'Helvetica Neue',Arial,Geneva,sans-serif" />
<mj-class name="align-center" align="center"/>
</mj-attributes>
<mj-style inline="inline">
p:first-child {
margin-top: 0;
}
p,
li {
line-height: 1.5;
}
li {
margin-bottom: 12px;
}
li:last-child {
padding-bottom: 0;
}
strong {
font-weight: bold;
}
.font-weight--light {
font-weight:100;
}
.link {
color:#008cd5;
text-decoration:underline;
}
.disclaimer {
font-size:12px;
color:#666666;
}
</mj-style>
</mj-head>
<mj-body background-color="#cccccc">
<mj-section>
<mj-column>
<mj-image width="423" src="http://www.scholastic.co.uk/web-assets/logos/logo_resource_bank_p_inline.png" alt="Scholastic Resource Bank logo" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
</mj-section>
<mj-section padding-bottom="12px">
<mj-column>
<mj-text mj-class="align-center">
<h1 class="font-weight--light" style="font-size:24px; line-height:1.125; margin:0">
WELCOME TO SCHOLASTIC RESOURCE BANK!
</h1>
</mj-text>
</mj-column>
</mj-section>
<mj-section padding="0px 12px 0px 12px">
<mj-column>
<mj-divider border-color="#c9c9c9" border-width="1px"></mj-divider>
</mj-column>
</mj-section>
<mj-section padding-top="12px">
<mj-column>
<mj-text>
<p>Dear Mrs A Nother,</p>
<p>We’re delighted you’ve chosen to join <strong>Scholastic Resource Bank: Primary</strong>.</p>
<p>You now have access to around 7000 teaching resources, including our premium downloadable content. As a member, you also get a wealth of additional benefits:</p>
<ul>
<li><strong><a href="https://resource-bank.scholastic.co.uk/search/search?age_type=age_range&search%5Bmag_id%5D=76680&search%5Border_by%5D=newest" class="link">Brand new</a></strong> KS1/KS2 resources added every week*</li>
<li>Exclusive member-only <strong>offers and giveaways</strong></li>
<li><strong>10% off</strong> Scholastic catalogue purchases – just enter the code <strong>XXXXX</strong> at the checkout on our online shop**</li>
<li>Access to our <strong><a href="https://resource-bank.scholastic.co.uk/calendar" class="link">What’s today…?</a></strong> calendar of significant events to help you plan topical lessons</li>
<li>Your very own <strong><a href="https://resource-bank.scholastic.co.uk/my_folder" class="link">My folder</a></strong> to store your favourite resources and help with your planning</li>
</ul>
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-bottom="24px">
<mj-column>
<mj-button font-weight="100">
Get started ≫
</mj-button>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text line-height="1" mj-class="align-center">
<h2 class="font-weight--light" style="font-size:20px; margin:0">
Our most popular resources
</h2>
</mj-text>
</mj-column>
</mj-section>
<mj-section padding="0">
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/6b/89/ant-colony-pos-461663.jpg" title="asset_1_title" alt="asset_1_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/1f/a5/523109.jpg" title="asset_2_title" alt="asset_2_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/bf/b9/528094.jpg" title="asset_3_title" alt="asset_3_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0">
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/e0/c5/801157.jpg" title="asset_4_title" alt="asset_4_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/af/3c/tongue-twisters-801448.jpg" title="asset_5_title" alt="asset_5_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
<mj-column width="33%" padding="12px">
<mj-image src="https://www.scholastic.co.uk/assets/a/ce/eb/ks2mathsboosterextraonline-final-1711932.jpg" title="asset_6_title" alt="asset_6_alt" href="https://resource-bank.scholastic.co.uk"></mj-image>
</mj-column>
</mj-section>
<mj-section>
<mj-column background-color="#dcdcdc" padding="12px 12px 0 12px">
<mj-text>
<h3 class="font-weight--light" style="font-size:18px; margin:0">DO YOU HAVE ANY QUESTIONS?</h3>
<p>If you have any questions about using either the website or your membership, we'll be glad to help.</p>
<p>Call <strong>0845 850 4411</strong> or email <strong>
<a href="mailto:[email protected]" class="link">[email protected]</a></strong><br/> Monday-Friday, 8.30am-5pm
</p>
</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text mj-class="align-center">
<a href="https://twitter.com/ScholasticUKTch" style="display:inline-block; text-decoration: none; width:25px">
<img width="22px" height="22px" src="http://www.scholastic.co.uk/assets/a/be/f9/twitter-1316576.png" href="https://twitter.com/ScholasticUKTch"/>
</a>
<a href="http://www.youtube.com/user/scholasticfilmsuk" style="display:inline-block; text-decoration: none; width:25px">
<img width="22px" height="22px" src="http://www.scholastic.co.uk/assets/a/ab/51/youtube-1316560.png" href="https://twitter.com/ScholasticUKTch"/>
</a>
<a href="https://www.facebook.com/scholasticukteachers" style="display:inline-block; text-decoration: none; width:25px">
<img width="22px" height="22px" src="http://www.scholastic.co.uk/assets/a/4c/c3/facebook-1316528.png" href="https://twitter.com/ScholasticUKTch"/>
</a>
<a href="https://www.pinterest.com/ScholasticEd/" style="display:inline-block; text-decoration: none; width:25px">
<img width="22px" height="22px" src="http://www.scholastic.co.uk/assets/a/5f/0d/pinterest-1316544.png" href="https://twitter.com/ScholasticUKTch"/>
</a>
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-bottom="24px">
<mj-column>
<mj-text>
<p class="disclaimer">* Excludes some school holidays</p>
<p class="disclaimer">** Exclusive Resource Bank member discount: 10% off purchases from Scholastic catalogues, including the 2017-18 Primary schools catalogue and Secondary schools catalogue and 2018 Primary Education catalogue only. Excludes Scholastic Reading Pro licences and lexiled book packs.</p>
<p class="disclaimer">IMPORTANT: Please do not reply to this email.</p>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Thanks a lot for the details.
Super weird, just tried sending from the app and can't reproduce your issue (tried with minifying/beautifying too): https://puu.sh/AlWDi/d6535a77c3.png.
ngarnier
on 14 May 2018
Very odd. Thanks for having a look. Just have to run with it.
ianperrettive
on 14 May 2018
Related issues
bensreed
·
3Comments
10kc-zack
·
4Comments
theVannu
·
3Comments
fmauNeko
·
3Comments
zarikadzer
·
3Comments
Most helpful comment
If you're experiencing this issue and you also happen to be using Rails with the premailer-rails gem, you need to disable it for mjml generated emails by passing the
skip_premailer: trueoption tomail, as described in their docs here.