title: Hide div on mobile devices, using CSS
body: <p>I want to hide a div containing the facebook likebox widget from mobile devices. I tried this but it doesn't work.</p>
  
  <p>div code:</p>
  
  <pre><code>&lt;div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>@media screen and (min-width: 0px) and (max-width: 720px) {
    #facebook { display: none; }
    .mobile-hide{ display: none; }
  }
  </code></pre>
  
  <p>What am i doing wrong?
  It does not work using the id or the class reference.</p>