title: Resize div according to the browser size
body: <p>I want a div to resize only when the screen size reaches to a certain size. I am using jQuery.</p>
  
  <pre><code>&lt;script&gt;
      var screenwidth = $(window).width();
      console.log(screenwidth);
      if(screenwidth&gt;=992){
          $("main").css("width","500px");
          console.log($("main").width());
      }
      if(screenwidth&lt;992 &amp;&amp; screenwidth&gt;=650){
          $("main").css("width","300px");
           console.log($("main").width());
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Problem: The problem is that when the screenwidth goes less than 992px it doesn't resize to 300px but I have to refresh the browser to make it effective. 
  Anyway to make it dynamic and responsive.</p>