title: Media query in responsive email template
body: <p>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. </p>
  
  <p>So, I tried not to use media query and stacked the columns using <code>display: inline-block; max-width:290px;</code>. </p>
  
  <ol>
  <li><p>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?</p></li>
  <li><p>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 <code>&lt;style&gt;&lt;/style&gt;</code> works just fine.</p></li>
  </ol>
  
  <p>The template looks somewhat like this:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  &lt;style type="text/css"&gt;
     table {
         font-size: 24px;
     }
     #tdtoshowinmobile {
         display: none;
     }
     @media only screen and max-device-width(767px){
         table {
             font-size: 32px !important;
         }
         #tdtoshowinmobile {
             display: block !important;
         }
     }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;table&gt;
          ...tr...td....
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>So, again my questions are: </p>
  
  <ol>
  <li><p>how to change <code>font-size</code> or <code>color</code> etc in responsive email template without using media queries?</p></li>
  <li><p>how to add media queries the right way?(For me adding them in <code>style</code> tag is not working)</p></li>
  </ol>