CODEWITHSUNDEEP
htmlcssemailmjml
Maximoose
Maximoose

Reputation: 151

Responsive images relating to screen resolution in emails?

I am currently using MJML to create responsive emails. The difficulty I am having is not an issue with MJML itself, but more around certain email clients not supporting media queries/styles, and so I am unsure as to how to create an effective way of displaying different images for desktop and mobile view.

Here is my code so far:

<mjml>
  <mj-head>
     <mj-style inline="inline">
      .show_on_desktop,
      .show_on_desktop-outlook {
        display: none;
      }

      .show_on_desktop,
      .show_on_desktop-outlook {
        mso-hide: all;
      }
    </mj-style>
    <mj-style>
      @media only screen and (min-width:480px) {
        .show_on_desktop {
          display: block !important;
        }

        .show_on_mobile,
        .show_on_mobile-outlook {
          display: none !important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>

    <mj-section css-class="show_on_desktop" padding="0">
      <mj-column css-class="show_on_desktop" padding="0">
        <mj-image src="https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" padding="0">
        </mj-image>
      </mj-column>
    </mj-section>

    <mj-section css-class="show_on_mobile" padding="0">
      <mj-column css-class="show_on_mobile" padding="0">
        <mj-image src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="" padding="0">
        </mj-image>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You can try it live here: https://mjml.io/try-it-live/37hvh_Ss0M7

Upvotes: 0

Views: 2564

Answers (1)

BaldEagle
BaldEagle

Reputation: 1018

Sorry to report, @Maximoose, but if the email client doesn't support media queries, you're up against an unbeatable constraint for those clients.

The MJML team recommends that authors write their MJML for "mobile first". That is, use media queries to create the desktop experience.

Support for media queries is far more widespread on desktops than on mobile clients, so the narrow screens get the default (mobile) experience and the wider screens (more likely to support media queries) can get their experience.

Perfect? Certainly not!

The world of email HTML? It is. Welcome to it!

More information at https://www.caniemail.com/features/css-at-media/. According to that, about half of all email opens support media queries.

While that specific information is interesting this time, there's similar information for lots of other features there. One valuable site!

You got pretty quick response here this time. You'd get a welcoming response to posing this question at https://mjml.slack.com/ (signup: https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg), too. Quick and insightful answers. Good people there, like here.

Upvotes: 1

Related Questions