css responsive

@media only screen and (max-width: 600px) {
  body {
	background-color: lightgrey;
  }
}
 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media all and (max-width: 699px) and (min-width: 520px) {
   ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

<div id="gallery">
            <div class="showcase-images">
                <div class="showcase-block">
            <img id="show-img" src="images/showcase/tabs.png" alt="Tabs">
            </div>
            </div>
            <nav>
            <ul id="main">
                <li id="tabs"><a href="#">Tab</a></li>
                <li id="login"><a href="#">Login</a></li>
                <li id="forum"><a href="#">Forum</a></li>
            </ul>
        </nav>
        </div>