title: How to make an element go away when the screen becomes smaller?
body: <p>I was learning about "media queries" and how you can, for example, change the color of something if the width of the screen becomes smaller than, for example, 680  pixels:</p>
  
  <pre><code>@media screen and (max-width: 680px) {
      header {
           background:blue;
      }
  }
  </code></pre>
  
  <p>I have a piece of code in the top right of my header:</p>
  
  <pre><code>        &lt;li&gt;
              &lt;a href="#"&gt;
                  Login
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  Sign in
              &lt;/a&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>How can I use media queries to say "when the screen becomes smaller than 680 px, I don't want the <code>Sign in</code> link to appear anymore.</p>
  
  <p>In other words, when the screen becomes less than 680 width pixels, I want only the <code>Login</code> button to remain.</p>