title: Widths donot change when using lower resolution in CSS
body: <pre><code>@media screen and (min-width: 300) and (max-width: 800px) {
  #top {
      font-size: 200%;
  
  }
  #first {
      width: 30%;
      height: 20%;
      font-size: 120%;
      position: relative;
      top:40%;
  }
  #second {
      float: right;
      width: 30%;
      height: 20%;
      font-size: 120%;
      position: relative;
      top: 20%;
  
  }
  #quote {
      position: relative;
      left: 10%;
  }
  #bannertextb{
      font-size: 250%;
      margin-left: 0;
  
  }
  #sps {
      font-size: 180%;
      position: relative;
      top: -08%;
      margin-left: 0;
  }
  #class {
      margin-left: 0;
  }
  #greek {
      font-size: 350%;
      margin-left: 0;
  }
  #banner {
      height: 30%;
  }
  
  }
  </code></pre>
  
  <p>I wish to change the widths when opened from a phone.But this doesnt seems to happen.
  But when i re-size my browsers window, everything works fine..
  You can view the whole website @- <a href="http://www.ronaksakhuja.com" rel="nofollow">This link</a></p>