title: Media Query not working
body: <p>The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added </p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container text-center" &gt;
              &lt;h1 class="banner-title"&gt;Welcome Refugees&lt;/h1&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>.SCSS</p>
  
  <pre><code>.banner-title {
      margin-top: 275px; 
      font-size: 700%;
  }
  @media only screen and (min-width: 400px) 
    and (max-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) { 
  
  .banner-title {
      font-size: 500%;
  }
  
  }
  </code></pre>
  
  <p>Is this a common issue?</p>