Html5 & CSS style form desktop, tablet and mobile

ch8pacific/pacific.css

body {background-image: linear-gradient(#ffffff, #4f6d93); color: #666666; background-repeat: no-repeat; background-attachment: fixed; font-family: sans-serif; padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;} #wrapper { margin-left: auto; margin-right: auto; width: 80%; min-width: 960px; background-color: #90c7e3; box-shadow: 2048px 3px #333333; } header { background-color: #000033; background-image: url(sunset.jpg); background-position: right; background-repeat: no-repeat; line-height: 400%; text-indent: 1em; color: #ffffff; height: 60px; padding-top: 15px; text-align: center; } h1 { padding-left: 20px; height: 72px; color: #FFFFFF; font-family: Georgia, serif; line-height: 200%; margin-bottom: 0; Color: #FFFFFF; margin-bottom: 0; margin-top: 0; } nav { padding: 20px; font-weight: bold; text-decoration: none; float : left; width: 160px; } nav a {text-decoration: none;} nav ul {list-style-type: none; margin: 0; padding-left: 0; font-size: 1.2em; } nav a:link { color: #000033; } nav a:visited { color: #344873; } nav a:hover { color: #ffffff; } #homehero { height: 300px; background-image: url(coasthero.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; } #yurthero { height: 300px; background-image: url(yurthero.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; } #trailhero { height: 300px; background-image: url(trailhero.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 190px; } main { background-color: #ffffff; margin-left: 190px; padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 30px; margin-bottom: 0 } h2 { color: #3399CC; font-family: Georgia, serif; line-height: 90%; outline-offset: 1px; text-shadow: 1px 1px 1px #CCCCCC; } main ul { list-style-image: url(marker.gif); } .resort { font-weight: bold; color: #5C7FA3; font-size: 150%; } .contact { font-size: 100%; color: #5C7FA3; } footer {margin-left: 190px; font-size: 75%; font-family: Georgia, serif; font-style: italic; padding: 20px; background-color: #ffffff; margin-top: 0; text-align: center; } #mobile { display: inline;} #desktop { display: none;} header, main, nav, footer, figure, figcaption, aside, section, article {display: block;} @media only screen and (max-width: 64em){ body {background-color: #ffffff;} #wraper {width: 0; width: auto; box-shadow: none;} main {margin-left: 0;} nav {float: none; width: auto; text-align: center; padding: 0.5em;} li {display: inline; padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 0.75em; padding-right: 0.75em;} homehero, yurthero, trailhero {margin-left: 0; height: 200px;} footer {margin-left: 0;} } @media only screen and (max-width: 37.5em) { header {padding-top: 1em;} main {padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 1em; padding-right: 1em; font-size: 90%;} h1 {font-size: 1.5em;} nav {padding: 0;} li {display: block; margin: 0; border-bottom: 2px #330000;} a {display: block;} homehero, yurthero, trailhero {background-image: none; height: 0;} mobile {display: inline;} disktop {display: none;} }