title: Make div visible when viewed on mobile device, hidden when not
body: <p>I'm trying to make it so that when users view my site on a mobile device (a max-width of 414px), a specific div (mobile-articles) is visible. However when viewed on desktop, the view should be hidden. I've tried the below, however my div doesn't seem to be visible on a mobile device (though it is hidden on desktop). How can I fix this? See code below:</p>
  
  <p><strong>Test.html</strong></p>
  
  <pre><code>    &lt;style&gt;
  
          .mobile-articles {
  
              visibility:hidden;
              display: none;
          }
  
  
      @media (max-width: 414px) and (min-width: 367px) {
  
        @viewport {
          width: device-width;
        }
  
  
      }
  
      @media screen and (max-width : 414px) {
  
          .mobile-articles {
  
              visibility:visible;
              display: block;
  
          }
  
      }   
      &lt;/style&gt;
  
  &lt;body&gt;
  
  &lt;div class="mobile-articles"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>