title: How to target only google chrome on mobile using css media queries
body: <p>I am creating a personal website and I am using css grid to display each section of the page with a fixed height of 100vh. Everything works fine until I test google chrome on mobile. 
  I understand that google chrome includes it's nav bar with the 100vh so I calculate that with the 100vh. It works, but it also applies to all browsers, mobile and pc. I want it to apply to only google chrome on mobile.</p>
  
  <p>I have already tried the following to target google chrome on mobile:</p>
  
  <pre><code>@media only screen and (-webkit-min-device-pixel-ratio:0)
  
  @media only screen and (-webkit-min-device-pixel-ratio:0) and (min- 
  resolution:.001dpcm)
  
  @media only screen and (-webkit-min-device-pixel-ratio:0) and (min- 
  resolution:.001dpcm) and (max-width:  37.5em ) //To target only mobile
  
  @media screen and(-webkit-min-device-pixel-ratio:0) {
   .container {-chrome-:only(;
   property: value;;
  ) ;}
  } //this is giving me a syntax error
  
  
  .container {
    background-color: $color-layout;
    display: grid;
    grid-template-rows:  repeat(3, 100vh) 80vh 20vh;
    grid-template-columns: 8rem repeat(4, 1fr) 8rem;
     @media only screen and (-webkit-min-device-pixel-ratio:0) and 
     (min-resolution:.001dpcm) and (max-width:  37.5em ) { grid- 
     template-rows:  repeat( 3, calc(100vh - 56px)) calc(80vh - 56px) 
     20vh; }
  }
  </code></pre>
  
  <p>I should only target google chrome mobile with this code but I target all mobile browsers. And if I leave (max-width: 37.em) for example, I target also pc.</p>