7 Replies Latest reply on Jan 10, 2017 12:55 PM by JD Nelson

    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.

        • Re: email media queries outside of template?
          Nicholas Manojlovic

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

           

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

            • Re: email media queries outside of template?
              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?

                • Re: email media queries outside of template?
                  Courtney 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.

                  • Re: email media queries outside of template?
                    Robb Barrett PRD

                    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.

                • Re: email media queries outside of template?
                  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?