7

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)

Mark Wilson
  • 1,324
  • 2
  • 10
  • 19
  • 6
    CSS for email should all be inline `` only your media queries should remain in your `
     – Aaron Oct 31 '16 at 10:47
  • I have important after all the rules in media queries. And as you said I now moved all the rules to inline while keeping only media query inside `style` tag. but media queries are not being applied. – Mark Wilson Oct 31 '16 at 11:17
  • 1
    In the year 2016, email layout is still a pain in the ass. Oh my God, this seems to not change anymore! – Marcos Pérez Gude Oct 31 '16 at 11:22
  • Have you included the viewport meta to your ``? `` – Aaron Oct 31 '16 at 11:24
  • yes you can see my question. I updated it a few minutes ago to show how I have included it – Mark Wilson Oct 31 '16 at 11:36
  • the !important in media query is very important here. Thanks – 0xh8h Aug 29 '19 at 06:55

1 Answers1

4

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 )

Arek Szczerba
  • 448
  • 2
  • 9