Question

I’m building an HTML Email, and would like to use @media query to display one banner for mobile and another for desktop/webmail screens. I know most email clients strip out the css found in the tag. Is there a way to put the css inline? Here’s an example of the code in currently..

<style type="text/css">

  @media (max-width: 1000px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
    img#standardBanner{display:none !important}
    img#mobileBanner{display:block !important} 
  }

</style>

Also is there any other way to be able to do this? I’m not having too much luck.

Thanks!

Answer 1

<style type="text/css">

    img#standardBanner{display:block !important}
    img#mobileBanner{display:none !important} 

    @media (max-width: 1000px){

    img#standardBanner{display:none !important}
    img#mobileBanner{display:block !important} 
  }

</style>