title: CSS media queries not working anywhere
body: <p>I am trying to use different CSS Stylesheets for different layouts (as you have already guessed from the title) but unfortunately nothing is working.</p>
  
  <p>I tried loading the CSS file</p>
  
  <pre><code> &lt;link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" /&gt;
  </code></pre>
  
  <p>in the meta tag and I also tried using </p>
  
  <pre><code>@media (min-width: 401px) and (max-width: 800px) {
  .page{max-width:730px; margin:0 auto; display: block; height:850px;  float:left; }
    }
  </code></pre>
  
  <p>in the main css file but no changes occur. </p>
  
  <p>This is how my header looks like:</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/image-slides.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/main.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" /&gt;
  </code></pre>
  
  <p>The CSS property that I am trying to change is a simple's div's width and so when I resize the browser nothing happens.</p>
  
  <p>What is wrong with my code?</p>