title: Hide div if screen is smaller than a certain width
body: <p>I want to hide a floating div if the user screen is &lt; 1024px as it will overlay with my blog content area. I found this jQuery on the net but I am not sure how to use it.</p>
  
  <pre><code>$(document).ready(function() {
  
  if ((screen.width&gt;1024)) {
      // if screen size is 1025px wide or larger
      $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
  }
  elseif ((screen.width&lt;=1024))  {
      // if screen size width is less than 1024px
      $(".yourClass").css('display', 'block'); // here you can also use show();
  }
  });
  </code></pre>
  
  <p>If my floating div class name is sharecontent, should I replace the above script like below? If yes, it's not working.</p>
  
  <pre><code>$(document).ready(function() {
  
  if ((screen.width&gt;1024)) {
      // if screen size is 1025px wide or larger
      $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
  }
  elseif ((screen.width&lt;=1024))  {
      // if screen size width is less than 1024px
      $(".sharecontent").css('display', 'block'); // here you can also use show();
  }
  });
  </code></pre>
  
  <p>I also tried replacing the screen.width with window.width but still no success :(</p>