email media queries outside of template?

[JD_Nelson]

I have a banner in an email that works; but when it switches to mobile it's too wide, or doesn't scale in a good way. Is it possible, at times, to include a mobile image to use in the right media query? Is this a template issue, or possibly a way to code within the 2.0 editor?

I remember when guided landing pages came out and you can select images for each media query, and I loved it.

[Nicholas_Manojl]

It's a template issue - as you can't inline a media query.

If you could access the template it could be easily solved.

[JD_Nelson]

I have access to the template, but it's one of those things that I'd want to happen sometimes, not all the time. For instance. If I have graphic1.jpg as a header and it doesn't look good on mobile, I'd want to switch it to graphic2.jpg. Would I do this using class references, or more php coding in editor 2.0?

[Casey_Grimes]

Hi JD,

In the particular case you're describing, your best bet would be to set up a module for your header using the Email Editor 2.0 syntax, then create local variables for both the main version and mobile version. Place the header as a background image (and define a unique ID in your HTML) with VML fallback. From there, you would create a media query to detect when the screen is less than 480px (or whatever your breakpoint is in this instance) to switch out the background image appropriately for that particular ID.

[JD_Nelson]

how do I switch out the background image? I think I'm following what you say (other than the VML Fallback??) and may just need to play around with it at some point...

[Robb_Barrett]

Make sure you have this code in your head:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--[if !mso]><!-->

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--<![endif]-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

From there, for your header you just want something like this:

	img {
	border: 0;
	}

.full-width-image img {

     width: 100%;

     max-width: 600px;

     height: auto;

  display: block;

  }

/*Media Queries*/

  @media screen and (max-width: 400px) {

		.full-width-image img {
		display:block;
		content: url({{my.mobile-img-url}}) !important;
		}

img .desktopImg{

  display: none;

  }

}

And then in your code....

<td class="full-width-image" style="overflow: hidden; max-width: 600px;">

             <a href=".../some-link.html" target="_blank"><img class="desktopImg" src="{{my.desktop-img-url}}" width="600" alt="never Forget your Alts" style="display: block;"/></a>

Now, this isn't the only way but it's a way. This allows you to token in the images so you can swap them out for different emails.

[Casey_Grimes]

Hi Robb,

As a heads-up: Gmail/Inbox doesn't support the content property, thus my recommendation of background (kludgey though it is.)

[JD_Nelson]

I'm thinking, if I just add 2 header sections and then figure out how to code my template to have a "view on mobile only" and "view on desktop only" criteria on them, then that criteria switches the media query on which to show - would something like that work?