title: Issues with meta viewport tag and css media queries
body: <p>Okay,</p>
  
  <p>I know there are a lot of questions out there on CSS media queries and meta viewport tags for responsive websites. I've read through a ton of them, but I'm not having any luck. </p>
  
  <p>I have a website, a portfolio website, that I had responsive. One day, the responsive stuff just stopped working. I started looking into it and just have had no luck. I've made sure to use the meta viewport tag, but that's just not doing anything. Here's my <code>&lt;meta&gt;</code> tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>and one section of the responsive CSS file:</p>
  
  <pre><code>@media screen and(max-width: 800px){
      /*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/
  
      .social-media a,
      .social-media iframe{
          margin-bottom: 10px;
      }
  
      .level2{
          height: 140px;
      }
  
  }
  </code></pre>
  
  <p>I've also tried with and without this bit of code:</p>
  
  <pre><code>@-o-viewport,
  @-ms-viewport{
    width: device-width;
  }
  </code></pre>
  
  <p>The frustrating thing is that at work I just finished a responsive site and had no issues. I figure maybe another set of eyes may be able to catch something that I haven't been able to.</p>
  
  <p>You can see the website at pjlamb12.github.io, and it will look fine in a desktop but not like I want it to on any mobile devices.</p>
  
  <p>Thanks!</p>
  
  <p>P.S.</p>
  
  <p>I don't know if this matters, but the site is on GitHub pages, and I'm using Jekyll to run the site.</p>
  
  <p>EDIT</p>
  
  <p>The rest of the code can also be seen in GitHub here <a href="https://github.com/pjlamb12/pjlamb12.github.com" rel="nofollow">https://github.com/pjlamb12/pjlamb12.github.com</a></p>