css responsive code example

Example 1: responsive html

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

Example 2: media queries

@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;
  }
}

Example 3: responsive html

@media (max-width: 530px){
    .CLASSHERE {
        padding: 10px 110px;
        margin-left: 365px;
        margin-bottom: 30px;
        font-size: medium;
        text-align: center;
    }
}

Example 4: make it responsive

<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>