Mobile version displayed in some clients #40
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. |
|
I have the same render issues using Litmus as well. These desktop clients are showing a mobile version :/ Edit: |
|
+1 |
|
Has anyone figured out a workaround for this issue in the meantime? |
|
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. |
iRyusa
changed the title
|
Updated the issue to close some |
|
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? |
|
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 So this second style tag wasn't stripped from regular gmail but was from business; maybe this is an issue with gmail? |
|
Closed by mistake, reopened sorry @g0ddish Yes, media queries are being totally removed from google apps gmail for unknown reason :/ |
|
Same issue here with the early versions of outlook (lte 2003) showing single column.
|
|
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:
So far it works for everything but Lotus Notes 8.5 and Outlook 2003. |
|
@lRlevolution but it will break the mobile first approach sadly |
|
Update: We're waiting for #227 to be merged to suppport Lotus Notes 8.5, Outlook 2000, Outlook 2002, Outlook 2003 |
|
Update removing older outlook since 2.1.1 got fix for them |
|
This issue also affects major inbox provider in Czech republic Seznam.cz with @email.cz, @seznam.cz, @post.cz) |
|
My solution: Replace attrs on mj-column with pixels if there is more than 1 column. Add this media query: Tested on EOA, works great on every device. Just a minor issue is that 3 cols get stacked as 2 + 1. |
|
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 |
|
@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: For our products-heave newsletters we cant allow to get all the content stacked in one column on the desktop. |
|
So you're removing |
|
No, it will stack anyway ;-) Only thing is that 3 columns get displayed as 2 + 1 I'll post a EOA test result. |
|
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. |
|
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" ***@***.***> 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
<#40 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AKxLOC0EW9D0gtWk3VcAvvy80XGPNKSKks5tCplxgaJpZM4HXZXx>
.
|
|
@dalefish, Yandex supports additivity: |
|
My layout |
|
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 Or is this about some other version? |
|
@ngarnier Ah, I see. In |
|
I am seeing this problem in Outlook.com. It appears the I am using the MJML app and sending using the sending functionality in the app via a MailJet account
Offending codeAlso, 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 ***@***.***> 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
<#40 (comment)>, 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 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) |
|
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 ***@***.***> wrote:
@iRyusa sorry, didn't see that, however when I add owa="desktop" to the <mjml> 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) |
|
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. 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 '' at the beginning of the email, adding '' at the beginning of the email too. When I put '' the desktop version looks the same (renders as mobile version). Thank you in advance! These are the screenshots:
This is the MJML: |
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? |
|
Any ESP that doesn’t alter the HTML will work.
|
and others
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.
The text was updated successfully, but these errors were encountered: