CODEWITHSUNDEEP
htmlcssemailmedia
user1180997
user1180997

Reputation: 103

@media query used inline for use within email?

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!

Upvotes: 1

Views: 1327

Answers (2)

henser
henser

Reputation: 3327

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

Upvotes: 0

15km
15km

Reputation: 99

To answer your question, for a pure css solution the answer would be no it is not possible.

You could though serve the images from a server and use a scripting language like PHP to get the device information of the user and then serve the appropriate image based on that using PHP function header.

Upvotes: 1

Related Questions