email media queries outside of template?

JD_Nelson
Level 10 - Community Advisor

email media queries outside of template?

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.

Tags (1)
7 REPLIES 7
Nicholas_Manojl
Level 9

Re: email media queries outside of template?

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
Level 10 - Community Advisor

Re: email media queries outside of template?

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
Level 10

Re: email media queries outside of template?

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
Level 10 - Community Advisor

Re: email media queries outside of template?

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
Marketo Employee

Re: email media queries outside of template?

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.

Robb Barrett
Casey_Grimes
Level 10

Re: email media queries outside of template?

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
Level 10 - Community Advisor

Re: email media queries outside of template?

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?