Mobile version displayed in some clients about mjml HOT 94 CLOSED

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

from mjml.

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.

from mjml.

https://www.emailonacid.com/app/acidtest/display/summary/QGxXVnhYvmovkzLbl6fNKVbHZ4LtZk3dNZWiBfOyl68ch/shared

from mjml.

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

from mjml.

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.

from mjml.

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.

from mjml.

@ngarnier Ah, I see. In test.js there is owa_desktop="true" ;-)

from mjml.

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.

from mjml.

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?

from mjml.

+1

from mjml.

Has anyone figured out a workaround for this issue in the meantime?

from mjml.

Updated the issue to close some

from mjml.

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

from mjml.

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

MJML try it live

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>

from mjml.

Closed by mistake, reopened sorry

@g0ddish Yes, media queries are being totally removed from google apps gmail for unknown reason :/

from mjml.

Same issue here with the early versions of outlook (lte 2003) showing single column.

from mjml.

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.

from mjml.

@lRlevolution but it will break the mobile first approach sadly

from mjml.

Update: We're waiting for #227 to be merged to suppport Lotus Notes 8.5, Outlook 2000, Outlook 2002, Outlook 2003

from mjml.

Update removing older outlook since 2.1.1 got fix for them
Outlook 2000
Outlook 2002
Outlook 2003

from mjml.

This issue also affects major inbox provider in Czech republic Seznam.cz with @email.cz, @seznam.cz, @post.cz)

from mjml.

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 ?

from mjml.

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

from mjml.

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 ?

from mjml.

No, it will stack anyway ;-)

Only thing is that 3 columns get displayed as 2 + 1

I'll post a EOA test result.

from mjml.

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.

from mjml.

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

from mjml.

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.

from mjml.

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?

from mjml.

@gad2103 Are you 100% sure you're using gmail and not google apps gmail ? Columns are fine in my personal gmail inbox

from mjml.

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
#40 (comment), 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.

from mjml.

Is it your personnal gmail account, or a "company" account

from mjml.

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

from mjml.

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

from mjml.

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

from mjml.

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

from mjml.

Any updates on a fix?

from mjml.

@patrickml no trick has been found yet to have "media queries" like for google app gmail.

from mjml.

Hey everyone, exciting times for gmail! I haven't done any testing yet but this was announced

from mjml.

Hope they'll update both inbox and google apps gmail too

from mjml.

Updating Google Apps name to G Suite ... still no support for media queries / aria hack here

from mjml.

Until some days ago, my coworker never saw this bug on GoogleApps. Now, she sees.

from mjml.

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?

from mjml.

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

from mjml.

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

from mjml.

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.

from mjml.

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:

from mjml.

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.

from mjml.

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: ;' property. This will solve the problem and will not break in a mobile version.

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.

from mjml.

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.

from mjml.

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! :)

from mjml.

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 #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

from mjml.

Ok, I understood, thank you! For putsmail - especially! :)

from mjml.

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.

from mjml.

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

from mjml.

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.

from mjml.

Well, we don't want to break the mobile first approach. Adding media queries to handle mobile version will break some clients.

from mjml.

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.

from mjml.

hey @JaimeHolland88, as answered here, there are only 2 explanations if the mobile layout is shown on Gmail:

1. The version of Gmail in which the email is read doesn't support responsive styles (see this Litmus post)
2. 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!

from mjml.

Thanks @ngarnier I used the putsmail app to send the email test.

from mjml.

@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

from mjml.

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

from mjml.

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

from mjml.

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.

from mjml.

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

from mjml.

Hello @maherelaridi

This is a known issue on Gmail and no one found out a workaround yet you can read more about this here : hteumeuleu/email-bugs#24

from mjml.

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.

from mjml.

It looks like MJMLl works after using the advise from @dmchoull. We are using Rails and turning premailer off was the solution for us.

from mjml.

@Tlapi Seznam.cz doesnt support media query. I tried your solution but it isnt working.

from mjml.

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

from mjml.

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

from mjml.

@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, отпишусь. Пока решил вопрос просто дивами

from mjml.

from mjml.

@dalefish, Yandex supports additivity:
Desktop: http://skrinshoter.ru/s/211217/Jbo29FB2?a
Mobile: http://skrinshoter.ru/s/211217/Vo5c8G2y?a

from mjml.

My layout
It should be: http://skrinshoter.ru/s/211217/SbhYYHsK?a
How it turned out: http://skrinshoter.ru/s/211217/p28PjYgy

from mjml.

In Outlook, too, everything is floating, in general, decided to switch to native layout

from mjml.

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.

from mjml.

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

from mjml.

@Tlapi you need to add owa="desktop" on <mjml> (more about it here).

from mjml.

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!

from mjml.

from mjml.

@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 mjmlio/mjml-app#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 (hteumeuleu/email-bugs#24)

from mjml.

from mjml.

Thanks, got Outlook.com working. I am using the new version of Gmail but I am still seeing the columns stack.

from mjml.

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

from mjml.

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.

from mjml.

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.

from mjml.

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 &#8811;
        </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>

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

from mjml.

Very odd. Thanks for having a look. Just have to run with it.

from mjml.

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 '' 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:
`

<mj-section background-color="#ffffff" padding-top="0px" padding-bottom="0px">
  <mj-column padding-top="0px" padding-bottom="0px" padding-left="30px" padding-right="30px">
    <mj-text align="center" padding-bottom="0px">
      <p style="padding-bottom:0px; color:#000000; font-weight:620; font-size:38px; font-family:apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;">All screen. All yours.</p>
      <p style="color:#787878; font-family:apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; line-height:1.3;font-weight:400; font-size:16px;">Say hello to the future. iPhone 13 is now<br>available online and in stores.</br></p>
    </mj-text>

    <mj-button padding-top="0px" href="https://www.apple.com/shop/buy-iphone/iphone-13" background-color="linear-gradient(to bottom, #389be9, #026fc9)" width="45px" border-radius="4px" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" background-color="#3798e5" inner-padding="6px 7px 6px 7px">Buy</mj-button>
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff" padding-top="0px">
  <mj-column width="150px">
  </mj-column>
  <mj-group width="50%">
    <mj-column>

      <mj-text padding-top="9px" text-decoration="none" padding-right="0px" padding-left="40px" color="#528ccf" align="center" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" font-weight="450"><a href="https://www.apple.com/iphone-14-pro">Learn more</a></mj-text>
    </mj-column>
    <mj-column>
      <mj-text padding-top="9px" text-decoration="none" padding-left="0px" padding-right="40px" color="#528ccf" align="center" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" font-weight="450"><a href="https://www.apple.com/retail/">Find a store</a></mj-text>
    </mj-column>
  </mj-group>
  <mj-column width="150px">
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff">
  <mj-column width="600px">
    <mj-image padding="0px 60px 10px 60px" src="https://fdn2.gsmarena.com/vv/pics/apple/apple-iphone-12-3.jpg">
    </mj-image>
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff">
  <mj-column padding-right="35px" padding-left="35px">
    <mj-text color="#323232" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="300" font-size="14px" align="center" padding-top="3px" padding-bottom="0px">All-new Liquid Retina display, the most advanced and color-accurate LCD in the industry. Even faster Face ID. The smartest, most powerful chip in a smartphone. A breakthrough camera system. And water resistance up to 6 meter for 30 minutes.</mj-text>
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff" padding-bottom="10px" padding-top="0px">

  <mj-column inner-border-radius="3px" padding-top="10px" padding-bottom="0px" padding-right="10px" padding-left="10px" width="250px" inner-background-color="#f7f7f7">
    <mj-text color="#000000" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" padding-top="30px" padding-left="20px" padding-right="20px" font-weight="550" font-size="23px" align="center">iPhone Upgrade Program</mj-text>
    <mj-text color="#323232" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="300" font-size="11px" align="center" padding-left="27px" padding-right="27px" padding-top="3px" padding-bottom="0px">The easiest way to upgrade to the latest iPhone.</mj-text>
    <mj-text color="#528ccf" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="500" font-size="13px" align="center" padding-left="27px" padding-right="27px" padding-top="10px" padding-bottom="20px"><a href="https://www.apple.com/shop/iphone/iphone-upgrade-program">Learn more ></a></mj-text>
    <mj-text color="#323232" font-family="Sapple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="300" font-size="11px" align="center" padding-left="20px" padding-right="20px" padding-top="0px" padding-bottom="10px">Already part of the program?</mj-text>
    <mj-text color="#528ccf" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="500" font-size="13px" align="center" padding-left="27px" padding-right="27px" padding-top="0px" padding-bottom="0px"><a href="https://www.apple.com/shop/iphone/iphone-upgrade-program#:~:text=You're%20eligible%20to%20upgrade,plan.%C2%B3%20It's%20that%20easy.">Check your upgrade elegibility ></a></mj-text>

    <mj-image fluid-on-mobile="true" width="200px" src="https://i.ibb.co/4SGJ6Hx/iphone-13-model-unselect-gallery-1-202207.jpg" padding-bottom="0px"></mj-image>
  </mj-column>


  <mj-column inner-border-radius="3px" padding-top="10px" padding-bottom="10px" padding-right="10px" padding-left="10px" width="250px" inner-background-color="#f7f7f7">
    <mj-text color="#000000" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" padding-top="30px" font-weight="550" font-size="23px" align="center">Trade up to<br>iPhone 13</br> </mj-text>
    <mj-text color="#323232" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="300" font-size="11px" align="center" padding-left="20px" padding-top="3px" padding-bottom="12px" padding-right="20px">Get up to $375 in credit towards the purchase of iPhone 13 when you trade in your eligible smartphone.</mj-text>
    <mj-text color="#528ccf" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" line-height="1.2" font-weight="500" font-size="13px" align="center" padding="0px 30px 23px 30px"><a href="https://www.apple.com/de/trade-in/">Learn more ></a></mj-text>
    <mj-image fluid-on-mobile="true" width="350px" src="https://i.ibb.co/kyy4t9x/iphone-trade-in-202010-FMT-WHH-copy.jpg" padding-bottom="35px" padding-left="0px" padding-right="0px"></mj-image>
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff">
  <mj-column>
    <mj-image padding="0px 0px 0px 0px" fluid-on-mobile="true" src="https://trendblog.euronics.de/wp-content/uploads/2020/10/Apple_iPhone12Pro-back-camera-magsafe-wallet_10132020.gif"></mj-image>
  </mj-column>
</mj-section>

<mj-section background-color="#ffffff" padding-top="0px">
  <mj-column padding-right="35px" padding-left="35px">
    <mj-text padding-right="0px" padding-left="0px" padding-bottom="0px" align="center" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;" font-size="25px" font-weight="600" line-height="1.2">Stick to Apple</mj-text>
    <mj-text padding-right="0px" padding-left="0px" align="center" padding-bottom="30px" padding-top="10px" font-family="Sapple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" font-size="15px" font-weight="500" line-height="1.3" color="#528ccf"><a href="https://www.apple.com/shop/iphone/accessories">Check our new<br>iPhone accesories</a></br>
    </mj-text>
  </mj-column>


</mj-section>



<mj-section background-color="#ffffff" padding-bottom="0px" padding="0px 30px 0px 30px">

  <mj-column width="270px" padding-top="10px" padding-bottom="0px" padding-right="0px" padding-left="10px">
    <mj-image align="center" padding-right="0px" padding-left="0px" fluid-on-mobile="true" padding-bottom="0px" src="https://i.ibb.co/v4RhRY8/compare-b5xf30djrsia-og-copy.png"></mj-image>
  </mj-column>

  <mj-column width="270px">
    <mj-text padding-right="0px" padding-top="30px" padding-bottom="0px" padding-left="0px" align="center" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" font-size="25px" font-weight="600" line-height="1.2">Compare<br>iPhone models</br>
    </mj-text>
    <mj-text padding-right="0px" padding-left="0px" align="center" padding-bottom="40px" font-family="apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif" font-size="15px" font-weight="500" line-height="1.3" color="#528ccf"><a href="https://www.apple.com/iphone/cellular/">Find the iPhone that's<br>right for you ></br></a>
    </mj-text>
  </mj-column>
</mj-section>

from mjml.

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.

from mjml.

@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

from mjml.

from mjml.