title: How do I write a media query for Gmail?
body: <p>I am trying to write some HTML/CSS for an email but can't get things to show and hide responsively.  I have one big table, with two nested tables.  Each of the nested tables is a footer that is hidden or shown based on the screen size.  Here's the code</p>
  
  <pre><code>        &lt;style&gt;
            @media all and (max-width: 768px) {
              table[table-view=desktop] {
                display: none !important;
              }
  
              table[table-view=mobile] {
                display: block;
              }
            }
  
            @media all and (min-width: 769px) {
              table[table-view=mobile] {
                display: none !important;
              }
  
              table[table-view=desktop] {
                display: block;
              }
            }
          &lt;/style&gt;
  
      &lt;some other stuff here&gt;
  
  &lt;table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;"&gt;
  ...
  &lt;/table&gt;
  
  &lt;table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"&gt;
  ...
  &lt;/table&gt;
  </code></pre>
  
  <p>When looking at this in Gmail, both footers appear.  When using the preview tool in the email building tool (SendGrid), it looks fine.</p>
  
  <p>I tried selecting the <code>mobile-view</code> and <code>desktop-view</code> classes in the media query but that didnt work- so I tried putting attributes in the HTML.</p>
  
  <p>What am I doing wrong?</p>