Mjml: Put different images on desktop or mobile

[hypocrisy87]

Hi, I need to put different image on desktop and on mobile. No background image, but a tag.

For example, on desktop devices:
<mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="http://xxx.it/DESKTOP.jpg" href="http://www.xxx.com" alt=""></mj-image>

and on MOBILE:
<mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="http://xxx.it/MOBILE.jpg" href="http://www.xxx.com" alt=""></mj-image>

How can I do this?

[ngarnier]

hi @hypocrisy87, this requires the use of media queries which is not supported right now. It will be in a future update, as detailed here: https://github.com/mjmlio/mjml/issues/420

For now, the only option is to add your media queries in the HTML output manually. To achieve what you want, you'll probably want to:

• have the desktop image and the mobile image one after the other
• use a different class on each of those images (for example, .desktop-image and .mobile-image)
• display only the appropriate image depending on the device used, using the display: none property.

Does it help? Be careful with this and make sure to test the result, especially on Outlook which will probably also require conditional comments.

I'm closing as we can't solve this directly but it's related to another issue.

[hypocrisy87]

Thank you!

[sicaboy]

hi @hypocrisy87, this requires the use of media queries which is not supported right now. It will be in a future update, as detailed here: #420

For now, the only option is to add your media queries in the HTML output manually. To achieve what you want, you'll probably want to:

• have the desktop image and the mobile image one after the other
• use a different class on each of those images (for example, .desktop-image and .mobile-image)
• display only the appropriate image depending on the device used, using the display: none property.

Does it help? Be careful with this and make sure to test the result, especially on Outlook which will probably also require conditional comments.

I'm closing as we can't solve this directly but it's related to another issue.

This way doesn't work in Lotus clients, Outlook (for Windows) clients, AOL Web mail, Yahoo Web mail.

It looks like those client ignored the CSS.

A realistic way is to bind the image a CSS class
So:

  <mj-head>
    <mj-breakpoint width="480px" />
    <mj-style>
      @media all and (max-width: 480px) {
        .header-img { 
          content: url(mobile.png);
          width: 100%;
        }
      }
    </mj-style>
  </mj-head>
  <mj-image css-class="header-img" src="desktop.png"></mj-image>

[Hodakhosravi]

are there any updates for this issue?

[GarryFlemings]

Have you seen https://github.com/mjmlio/mjml/issues/420#issuecomment-287390404?

Don't be too excited/disappointed. The same person said in 2017, https://github.com/mjmlio/mjml/issues/420#issuecomment-278052112: "be careful, media queries are far from being supported in every email clients".

Media queries are part of the language of the web that email authors wish we could use reliably. His words remain true today: Though we can send media queries in email, we know many email clients (say, desktop Outlooks and others) don't respond to them. :(

That's an aspect of email as we know it, not MJML alone.

Welcome among email authors. This probably frustrates all of us.

More detail than you asked for: https://www.caniemail.com/search/?s=%40media