title: display none on desktop / mobile
body: <p>I'm not sure what is wrong here and i'm drawing a blank.</p>
  
  <p>I've 2 tables. One I want to display to desktop users and one to mobile users, 
  So I was trying to set a display none here is my code. </p>
  
  <pre><code>.mobile{display: none;}
  </code></pre>
  
  <p>This was the css to side the mobile table on desktop</p>
  
  <pre><code>@media only screen and (min-width : 320px) {
  .desktop{display: none;}
  .mobile{ display:block;}}
  </code></pre>
  
  <p>This was the code for hiding the desktop table on mobile. </p>
  
  <p>and here was the html</p>
  
  <pre><code>&lt;table class="desktop"&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-win.png"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-mac.png"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-and.png"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-ios.png"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Windows PC&lt;/td&gt;
    &lt;td&gt;Apple PC&lt;/td&gt;
    &lt;td&gt;Android Device&lt;/td&gt;
    &lt;td&gt;iOS Device&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="mobile"&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-and2.png"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="images/aqu-landing_icon-ios2.png"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Android Device&lt;/td&gt;
    &lt;td&gt;iOS Device&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Should this work as I have it ? </p>