Annotated CSS Used in this Example: /* Responsive Structure style default for devices that do not support media queries. Create base styles here and then update only those properties that require changes. ----------------------------------------------- */ /* * {outline: 1px solid pink;}*/ body {font: 15px/18px Georgia, serif; background: #fff; color: #000;} /*This sets the font for the entire page. Change it's size, and all fonts change size, as long as they have been sized by the relative em unit.*/ section {width: 90%; background: none; margin: 0 auto;} /*Both #responsive and #fluid are sections*/ #responsive { margin-bottom: 60px;} /*#responsive is a container that holds the other elements and gets changed with each new media query*/ p {margin: 10px; white-space: pre-wrap;} header {border-bottom: 3px solid gray;z-index: 100;} h1 {font-size: 2em; color: #000; Background:none; padding: 2px;} /* columns */ .left-column {background: silver; color: black;} .main-column {background: #ddd; color: black;} .right-column {background: silver; color: black;} .l-column {background: silver; color: black;} .m-column {background: #ddd; color: black;} .r-column {background: silver; color: black;} /* navigation */ nav ul li {list-style:disc; display: block;} nav a { font-size: 1em; background: red; color: white; text-decoration: none; text-align: center;} nav a:hover {background: green; color: white} /* MEDIA QUERIES */ @media only screen and (min-width: 320px) { /* 320 =================================================== */ #responsive {width: 320px; background: #eee;} nav ul li {display: block; } nav a {float: left; display: block; width: 60px; height: 20px; border-bottom: 2px solid black;} /* navigation */ nav ul li {list-style:none; display: inline-block;} nav a {padding: 10px 20px; margin: 10px; width: 50px; } } /* end iPhone portrait*/ @media only screen and (min-width: 480px) { /* 480 =================================================== */ #responsive { width: 480px; background: #fff; border: 1px solid silver;} /* navigation */ nav ul li {display: block; } nav a {float: none; display: block; width: 320px; height: 20px; border-bottom: 2px solid black;} } /* end iPhone Landscape*/ @media only screen and (min-width: 600px) { /* 600 =================================================== */ #responsive { width: 600px; background: #eee; border: none} /* navigation */ nav ul li {list-style:none; display: inline-block;} nav a {padding: 5px 20px 15px; margin: 10px; width: 40px;} }/*small tablet*/ @media only screen and (min-width: 768px) { /* 768 =================================================== */ #responsive {width: 700px; background: #000;} body {background: #000;} h1 {color: #fff;} /* navigation */ nav a {width: 60px; font-size: 1.3em;} /* columns */ .left-column {float: left; width: 150px;} .main-column {float: left; width: 400px;} .right-column {float: right; width: 150px;} } @media only screen and (min-width: 992px) { /* 992 =================================================== */ #responsive {width: 90%; background: #ddd;} body {background: #fff;} h1 {color: #000;} #part-1 {display: table;} #part-1 div {float: none; display: table-cell;} .left-column { width: 21%;} .main-column { width: 57%;} .right-column { width: 21%;} } @media only screen and (min-width: 1382px) { /* 1382 =================================================== */ #responsive {width: 75%; padding-left: 15%; background: #fff;} /* navigation */ nav ul li {display: block; } nav {position: absolute; right: 85%;} nav a {display: block; width: 100px; height: 20px; border-bottom: 2px solid black;} }