mjmlio / mjml

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

Mobile version displayed in some clients #40

Closed rgbjay closed 6 years ago

rgbjay commented 8 years ago

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.

iRyusa commented 7 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

boligolov commented 7 years ago

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

plaskaw commented 7 years ago

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.

iRyusa commented 7 years ago

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

plaskaw commented 7 years ago

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.

iRyusa commented 7 years ago

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

JaimeHolland88 commented 7 years ago

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.

ngarnier commented 7 years ago

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!

JaimeHolland88 commented 7 years ago

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

xiaomaosusie commented 7 years ago

@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

ngarnier commented 7 years ago

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

ckissi commented 7 years ago

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

ngarnier commented 7 years ago

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.

maherelaridi commented 7 years ago

Same issue here :/

Before clicking "Display images below"

screenshot 2017-06-23 17 08 46

After clicking Display images below, I get this:

screenshot 2017-06-23 18 09 44

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

iRyusa commented 7 years ago

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

pjar commented 7 years ago

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

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

lsegeta commented 7 years ago

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

kostyasb commented 6 years ago

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

ngarnier commented 6 years ago

@kostyasb, 2 options:

It's impossible to help you without more information.

kostyasb commented 6 years ago

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

dalefish commented 6 years ago

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 .

kostyasb commented 6 years ago

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

kostyasb commented 6 years ago

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

kostyasb commented 6 years ago

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

ngarnier commented 6 years ago

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.

Tlapi commented 6 years ago

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

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

Tlapi commented 6 years ago

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

ianperrettive commented 6 years ago

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

screen shot 2018-05-11 at 15 31 18

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!

iRyusa commented 6 years ago

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

ianperrettive commented 6 years ago

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

iRyusa commented 6 years ago

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.

ianperrettive commented 6 years ago

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

iRyusa commented 6 years ago

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

ianperrettive commented 6 years ago

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.

ngarnier commented 6 years ago

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.

ianperrettive commented 6 years ago

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: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>
ngarnier commented 6 years ago

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.

ianperrettive commented 6 years ago

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

designimartinez commented 1 year ago

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:

Email sent with Gmail to Gmail, mobile version (wrong) Email sent with Litmus Putsmail to Gmail, mobile version (correct)

Email sent with Litmus Putsmail to Gmail, desktop version (correct) Email sent with Gmail to Gmail, desktop version (wrong) Desktop design should look like this Mobile design should look like this

This is the MJML: `

All screen. All yours.

Say hello to the future. iPhone 13 is now
available online and in stores.

Buy
Learn more Find a store 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. iPhone Upgrade Program The easiest way to upgrade to the latest iPhone. Learn more > Already part of the program? Check your upgrade elegibility > Trade up to
iPhone 13
Get up to $375 in credit towards the purchase of iPhone 13 when you trade in your eligible smartphone. Learn more >
Stick to Apple Check our new
iPhone accesories

Compare
iPhone models
Find the iPhone that's
right for you >

`

iRyusa commented 1 year ago

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.

designimartinez commented 1 year ago

@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

iRyusa commented 1 year ago

Any ESP that doesn’t alter the HTML will work.