title: Media Queries not working at all whatsoever
body: <p>I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).</p>
  
  <p>Here's what I have tried:</p>
  
  <p>I have tried putting this in my  tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>No success when I try media query in a  tab or in a separate css stylesheet.</p>
  
  <p>I have tried removing it aswell.</p>
  
  <p>I have tried these media queries for my font-sizes:</p>
  
  <pre><code>@media (max-width: 400px) {
      body { font-size: 60%;}
  }
  
  @media only screen and (max-device-width: 800px) {
      body { 
          font-size: 80%;
          background-color: blue;  
      }
  
  }
  
  @media (max-width: 1100px) {
      body { font-size: 120%;}
  }
  </code></pre>
  
  <p>I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.</p>
  
  <p>Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.</p>
  
  <p>Thank you in advance for your help!</p>