Closed rgbjay closed 6 years ago
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
Ok, I understood, thank you! For putsmail - especially! :)
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 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.
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.
Well, we don't want to break the mobile first approach. Adding media queries to handle mobile version will break some clients.
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.
hey @JaimeHolland88, as answered here, there are only 2 explanations if the mobile layout is shown on Gmail:
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!
Thanks @ngarnier I used the putsmail app to send the email test.
@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
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 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.
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.
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
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
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.
It looks like MJMLl works after using the advise from @dmchoull. We are using Rails and turning premailer off was the solution for us.
@Tlapi Seznam.cz doesnt support media query. I tried your solution but it isnt working.
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, 2 options:
It's impossible to help you without more information.
@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, отпишусь. Пока решил вопрос просто дивами
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. While the 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, Yandex supports additivity: Desktop: http://skrinshoter.ru/s/211217/Jbo29FB2?a Mobile: http://skrinshoter.ru/s/211217/Vo5c8G2y?a
My layout It should be: http://skrinshoter.ru/s/211217/SbhYYHsK?a How it turned out: http://skrinshoter.ru/s/211217/p28PjYgy
In Outlook, too, everything is floating, in general, decided to switch to native layout
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 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?
@ngarnier Ah, I see. In test.js
there is owa_desktop="true"
;-)
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
<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 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 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)
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.
Thanks, got Outlook.com working. I am using the new version of Gmail but I am still seeing the columns stack.
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
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.
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.
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:resourcebank@scholastic.co.uk" class="link">resourcebank@scholastic.co.uk</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.
Very odd. Thanks for having a look. Just have to run with it.
Hello everyone,
I am having a problem with MJML. Small disclaimer, I've been coding with the platform just a few days, so I am not an expert. My email providers, both Gmail and Yahoo, display the email wrong (see attachments below), as if in mobile version when it should be desktop.
The only way in which the email renders well, both in desktop and mobile version, is if I send it using Litmus Putsmail or with HubSpot (by creating a design file and email template, and then sending the email with the platform).
After reading all the posts and threads regarding this issue of emails not rendering properly on Gmail, I am not able to find a solution to this, and it is really a pity because I love the platform and I find it very very useful. I've tried many things, an example is adding '
Thank you in advance!
These are the screenshots:
This is the MJML:
`
All screen. All yours.
Say hello to the future. iPhone 13 is now
available online and in stores.
`
The only way in which the email renders well, both in desktop and mobile version, is if I send it using Litmus Putsmail or with HubSpot (by creating a design file and email template, and then sending the email with the platform).
You said it yourself, it comes from the way you're sending the email : it alter the html MJML output so there's nothing we can do about it.
@iRyusa and is there a way of sending an email to a Gmail account without using HubSpot or Litmus Putsmail and getting it rendered properly? Thanks
Any ESP that doesn’t alter the HTML will work.
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.