title: Making a DIV hide if viewport drops below set width
body: <p>I've been working/searching for this specific idea for a while, but I can't seem to find a solution.</p>
  
  <p>Basically I'm working with a wordpress plugin, where a piece of content is shown, and it works fine except for mobile devices.</p>
  
  <p>I'm trying to fix this by making the DIV hide when the viewport hits a certain width.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function () {
  var screen = $(window)    
  if (screen.width() &lt; 800) {
      $("#attentionGrabber").hide();
  }
  else {
      $("#attentionGrabber").show();
  }
  });&lt;/script&gt;
  </code></pre>
  
  <p>This is assuming #attentionGrabber is the div I'm trying to control.</p>
  
  <p>I think that is the most simple way to show or hide it depending on the viewport, but nothing seems to happen when I place that code in the header.</p>