Media query in responsive email template

css email media-queries html-email email-templates

20,673

1 Think it can be done only using media query.
Some popular mobile mail clients support media query, so in my opinion it's worth.

2 Hope this code can help you

@media screen and (max-device-width: 767px),
screen and (max-width: 767px)     {

}

also, maybe use some doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you lookin for responsive email example with multiple columns please take a look at litmus or other free templates ( this one looks really good as example )

20,673

Author by

Mark Wilson

I am a Front end and WordPress developer with 8+ years of experience in Web Development. My passion has driven me to start my own agency : MyPSDtoHTML.

Updated on November 11, 2020

Comments

Mark Wilson over 3 years
I need to build a responsive email template. I did my research and learnt that media queries are not widely supported by the email clients.

So, I tried not to use media query and stacked the columns using display: inline-block; max-width:290px;.
1. But what if I want to change the font size for mobile version? Also I have a case where client wants few blocks to be visible in mobile but not on desktop. How can I achieve these without media query?
2. Also, in my case when I add style rules and media queries, I guess iOS supports media queries. But rues under media queries are not appearing but the other rules defines in <style></style> works just fine.
The template looks somewhat like this:
```
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
   table {
       font-size: 24px;
   }
   #tdtoshowinmobile {
       display: none;
   }
   @media only screen and max-device-width(767px){
       table {
           font-size: 32px !important;
       }
       #tdtoshowinmobile {
           display: block !important;
       }
   }
</style>
</head>

<body>


    <table>
        ...tr...td....
    </table>
</body>
```
The above template adds the normal rules to inline elements but removes the media queries in my case. I read an article that says that mail clients remove style tags and add it to inline elements. And I guess since media queries can't be defined inline they are being ignored.

So, again my questions are:
1. how to change font-size or color etc in responsive email template without using media queries?
2. how to add media queries the right way?(For me adding them in style tag is not working)