title: conflicting media queries iPhone X
body: <p>I have the following media queries. The first one is for certain screens below a certain width. The second is specifically for the iPhone X. Is it possible to override the first media query when it is an iPhone X only? The following does not seem to work</p>
  
  <pre><code>@media (max-width: 449px) {
      h1.question { padding: 20px 0px; }
  }
  
  @media only screen 
      and (device-width : 375px) 
      and (device-height : 812px) 
      and (-webkit-device-pixel-ratio : 3) { 
          h1.question { padding-top: 50px !important; }
  }
  </code></pre>