title: is it possible to target handheld mobile devices in html/css?
body: <p>I have a video in my html that I want only to show on desktop browsers because the difference in bandwidth i believe from desktop to mobile cripples the mobile browsers somewhat. Is there any logic in html, or css i can use to target mobile devices? </p>
  
  <p>here is my current html:</p>
  
  <pre><code>  &lt;div class="second-section"&gt;
      &lt;video class="rocky" autoplay="true" loop&gt;
        &lt;source src="rocky_2.mp4" type="video/mp4"&gt;
        &lt;source src="rocky_2.webm" type="video/webm"&gt;
      &lt;/video&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and my current css:</p>
  
  <pre><code>.second-section {
    position: relative;
    height: 100vh;
    background-color: #CD9B9B;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    text-align: center;
    overflow: hidden;
  }
  .rocky {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background: transparent;
  }
  </code></pre>
  
  <p>is there any media queries or any logic i can implement to make this video only display in desktop browsers?</p>