title: CSS - Media Queries for email template not working
body: <p>I am working on an email template that needs to be responsive for mobile.</p>
  
  <p>Here are my media queries:</p>
  
  <pre><code>@media only screen and (max-width: 639px){
      .mobileHide{display:none !important;}
  }
  </code></pre>
  
  <p>And my html:</p>
  
  <pre><code>&lt;td style="padding:0 0 0 50px;margin: 0;vertical-align: top;" class="mobileHide"&gt;
      &lt;div style="font-family: Calibri,Arial,sans-serif;font-size:64px;font-weight:bold;color:#fec326;margin:0;"&gt;1&lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The problem I am having is the .mobileHide element is hidden when viewed on desktops on a resolution above 639px</p>
  
  <p>I need it to be visible on desktops and hidden on mobile.</p>
  
  <p>Any ideas or help with this is much appreciated! :)</p>