Media query in responsive email template
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;.
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?
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:
how to change
font-sizeorcoloretc in responsive email template without using media queries?how to add media queries the right way?(For me adding them in
styletag is not working)
Answer
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 )