email media queries outside of template? | Community
Skip to main content
J
Community Advisor
JDNelson1Community Advisor
Community Advisor
January 10, 2017
Question

email media queries outside of template?

  • January 10, 2017
  • 2 replies
  • 3324 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Nicholas_Manojl
Nicholas_Manojl
Level 8
January 10, 2017

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

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

J
Community Advisor
JDNelson1Community AdvisorAuthor
Community Advisor
January 10, 2017

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_Grimes2
Casey_Grimes2
Level 10
January 10, 2017

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.

    J
    Community Advisor
    JDNelson1Community AdvisorAuthor
    Community Advisor
    January 10, 2017

    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?

    Terms & ConditionsAccessibility statement

    Loading footer...