meta tag @media in css for responsive

using meta tag and @media in css for making website more responsive when used in small screen devices.

by Mayank Khanna

HTML

<html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <body>
    <h1>
      Responsive navigation for mobile and laptops.
    </h1>

    <p>Check out this.</p>

    <div class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>


  </body>

</html>

CSS

.nav {
  background-color: black;
  display: box;
  overflow: hidden;
}

a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

a:hover {
  background-color: #ddd;
  color: #000;
}

@media screen and (max-width:600px) {
  a {
    float: none;
    width: 100%;
  }
}