responsive web designs code example

Example 1: what is responsive design

/* Answer to: "what is responsive design" */

/*
  Responsive web design is an approach to web design that makes
  web pages render well on a variety of devices and window or screen
  sizes. Recent work also considers the viewer proximity as part of
  the viewing context as an extension for RWD.

  In other words, it makes your website look nice on all devices.

  To learn Responsive Web Design head over to W3Schools tutorial:
  https://www.w3schools.com/css/css_rwd_intro.asp
*/

Example 2: responsive website

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

Example 3: responsive page

/*Default CSS layout for narrow screens*/

@media (min-width: 480px) {
  /*CSS for medium width screens*/
}

@media (min-width: 800px) {
  /*CSS for wide screens*/
}

@media (min-width: 1100px) {
  /*CSS for really wide screens*/
}

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>