title: @media doesn't work
body: <p>I was rewriting the style of my page for smaller screens using media queries : </p>
  
  <pre><code>@media only screen 
  and (min-width : 400px) 
  and (max-width : 1024px) {
  #container {
  right:10px;
  top:50px;
  font-size:24px;
  position:absolute;
  min-height: 85%;
  margin-left:auto;
  width:100px;
  }   
  #portfolio {
  width:100px;
  min-height:550px;
  -webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  -webkit-border-radius: 10px;
  border-radius: 10px;}
  #whoami {
  width:100px;
  min-height:550px;
  -webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  -webkit-border-radius: 10px;
  border-radius: 10px;    }
  #blog {
  width:100px;
  min-height:550px;
  -webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  -webkit-border-radius: 10px;
  border-radius: 10px;    
  }
  #contact {
  width:100px;
  min-height:550px;
  -webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  }
  
  }
  </code></pre>
  
  <p>And NOTHING DID WORK AT ALL.. I viewed the webpage through my Dreamweaver CS6 compatibility view and it didn't work so I checked it by resizing my browser window and didn't work too.
  Any ideas why didn't it work ? Doesn't it work with IDs ?!</p>