title: Media query not functioning as expected
body: <p>I have some CSS</p>
  <pre><code>.fullscreen-bg {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      z-index: -100;
  }
  
  .fullscreen-bg__video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      min-height: 100%;
      -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  }
  @media (max-width: 767px) {
      .fullscreen-bg {
          background: url('../img/MichaelPR.jpg') center center / cover no-repeat;
      }
  
      .fullscreen-bg__video {
          display: none;
      }
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div className=&quot;fullscreen-bg&quot;&gt; 
      &lt;video loop muted autoPlay className=&quot;fullscreen-bg__video&quot;&gt; 
          &lt;source src={background} type=&quot;video/mp4&quot; /&gt; 
          &lt;source src={background} type=&quot;video/ogg&quot; /&gt; 
          Your browser does not support the video tag. 
       &lt;/video&gt; 
  &lt;/div&gt; 
  &lt;div&gt; 
      &lt;img className=&quot;logo&quot; alt=&quot;Great State&quot; src={logo} /&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>That I understand should have a background video only when the screen is larger than 767. The background video is always showing. So it leads me to believe that the media query that I have is not functioning. I have tried to set the default background to a color but still now luck. How can I show a background image only when the screen size is above a certain limit?</p>