I've just upgraded my site to include responsive styles, but when I uploaded the changes, the fallback (original / fluid) styles don't work. It just uses the highest min-width responsive styles. What did I do wrong?
My site is http://jcwebandgraphic.com/
HTML
<body>
<!-- #nav-bkg: Nav BKG Image Scrollstop -->
<div id='nav-bkg' class='scroll'>
<img src='images/dandelion-nav-color.png'>
<img src='images/dandelion-nav.png'>
</div> <!-- Closes #nav-bkg -->
<!-- nav: Top Nav -->
<nav role='navigation'>
<ul>
<li><a href='#services-section'>Services</a></li>
<!--
<li><a href='#products-section'>Products</a></li>
-->
<li><a href='#work-section'>Work</a></li>
<li><a href='#contact-section'>Contact</a></li>
</ul>
</nav> <!-- Closes Top Nav -->
<!-- #logo: Logo -->
<div id='logo-container'>
<img id='logo' src='images/logo2.png'>
</div> <!-- Closes #logo -->
<!-- #page-wrapper Page Wrapper -->
<div id='page-wrapper' role='main'>
<!-- .scroll: Site BKG Image Scrollstop -->
<div class='scroll'>
<img src='images/dandelion-color.jpg'>
<img src='images/dandelion-greyscale.jpg'>
</div> <!-- Closes .scroll -->
<!-- #about-section: About Me-->
<section id='about-section'>
<h2 class='subtitle'>About Us</h2>
<p>
Welcome! We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web development, graphic design, hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for all your modern web, printing, and signage needs. Check out our remarkably affordable rates below or request a quote for our best pricing option.
</p>
</section> <!-- Closes #about-section -->
<!-- #services-section: Service Types Offered -->
<section id='services-section' class='main-section-styles'>
<h2 class='subtitle'>Services</h2>
<!-- .fa-icon: Large FA Icon Container -->
<div id='fa-icon'>
<div class='icon'>
<i class='fa fa-laptop icon-fixed-width fa-3x'></i>
<h5>Web</h5>
</div>
<div class='icon'>
<i class='fa fa-magic icon-fixed-width fa-3x'></i>
<h5>Graphic</h5>
</div>
<div class='icon'>
<i class='fa fa-connectdevelop icon-fixed-width fa-3x'></i>
<h5>Hosting</h5>
</div>
<div class='icon'>
<i class='fa fa-wrench icon-fixed-width fa-3x'></i>
<h5>IT</h5>
</div>
</div> <!-- Closes .fa-icon -->
</section> <!-- Closes #services-section -->
<!-- #specials: Specials -->
<section id='specials' class='main-section-styles'>
<h2 class='subtitle'>Specials</h2>
<div class='offer'>
<p>
Static Single-Page Site just $99!
</p>
<p>
2 Years of Hosting + IT just $75!
</p>
<br>
<span>
Offers end November 1st, 2015
</span>
</div>
</section> <!-- Closes #specials -->
<!-- #work-section: Portfolio Examples -->
<section id='work-section' class='main-section-styles'>
<h2 class='subtitle'>Work</h2>
<ul class='slider'>
<img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'>
<img src='images/air.jpg' alt='Professional Project: Audio Information Radio'>
<img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'>
<img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'>
<img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'>
<img src='images/placestory.jpg' alt='Student Project: This is Me'>
<img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'>
<img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'>
</ul>
</section>
<!-- #contact-section: Contact Form & Info -->
<section id='contact-section' class='main-section-styles'>
<h2 class='subtitle'>Contact</h2>
<br><br>
Phone: <a href='callto:+13602810359'> 360-281-0359</a>
<address>Email: <a href='mailto:info@jcwebandgraphic.com'> info@jcwebandgraphic.com</a></address>
<br>
<div id='contactform'>
<form action='contact.php' method='post'>
<div class='contact-wrap'>
<p>Your Name :<input class='type' type='text' name='cf_name'></p>
<p>Your E-mail:<input class='type' type='text' name='cf_email'></p>
<p class='antispam'>Spam-Bots!:<input class='type' type='text' name='url' placeholder='** Leave Blank **'></p>
</div>
<div class='contact-wrap'>
<p id='message'>
Message:
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</p>
</div>
</form>
</div> <!-- Closes #contactform -->
</section> <!-- Closes #contact-section -->
<footer>
<p id='copyright'>
© JC Web & Graphic 2015
</p>
<!--
<p>
<a href='resume.pdf' target='_blank'>Download Resume</a>
</p>
-->
</footer>
</div> <!-- Closes #page-wrapper -->
</body>
</html>
CSS Fallback
@media screen and (min-width: 1000px) {
body {
width: 100%;
background-color: #696773;
}
footer {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
/* **************************************** Menu Styles **************************************** */
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 600;
}
nav ul {
width: 100%;
}
nav ul li {
width: 30.333%;
padding: 1.5%;
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
nav ul li a {
width: 98%;
padding: 2% 7%;
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #ffffff;
outline: 1px solid #ffffff;
}
#nav-bkg {
z-index: 500;
}
/* **************************************** Logo Styles **************************************** */
#logo-container {
width: 20%;
margin: 20% 40% 3% 40%;
}
#logo {
width: 100%;
}
/* ************************************* Scrollstop Styles ************************************* */
.scroll {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.scroll img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroll img:first-child {
opacity: 1;
}
.scroll img:nth-child(2) {
opacity: 1;
transition-duration: 1s;
transition-timing-function: ease;
}
/* ************************************ Main Content Styles ************************************ */
section {
width: 90%;
margin: 0;
margin-top: 1%;
padding: 5%;
background-color: #ffffff;
color: #696773;
overflow: auto;
}
.subtitle {
font-family: 'hipstelveticaultralight';
font-size: 1.9em;
font-weight: 200;
color: #50E5C0;
}
/* Services Section Styles */
#services-section {
width: 34%;
height: 350px;
margin: 2% 1% 2% 5%;
background-color: #696773;
float: left;
opacity: .95;
}
#services-section .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#services-section #fa-icon {
width: 100%;
text-align: center;
}
#services-section #fa-icon .icon {
width: 25%;
color: #f26da5;
float: left;
}
#services-section #fa-icon i {
padding-bottom: 15%;
}
#services-section h5 {
margin-top: 10%;
font-size: .75em;
text-align: center;
color: #ffffff;
border-top: 1px solid #ffffff;
}
/* Specials Section Styles */
#specials {
width: 34%;
height: 350px;
margin: 2% 5% 2% 1%;
background-color: #696773;
color: #ffffff;
float: right;
opacity: .95;
}
#specials .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#specials p {
color: #50E5C0;
}
#specials span {
margin-top: 1em;
font-size: .7em;
float: right;
}
/* Work Section Styles */
#work-section {
width: 80%;
margin: 0 5%;
}
#work-section img {
width: 22%;
padding: 1%;
box-shadow: 0 0 8px #696773;
}
/* Contact Section Styles */
#contact-section {
margin-top: 5%;
color: #ffffff;
background-color: #696773;
opacity: .95;
}
#contact-section .subtitle {
color: #ffffff;
}
.contact-wrap {
width: 50%;
float: left;
}
#contact-section address {
font-style: normal;
}
#contact-section p {
text-indent: 2em;
}
#contact-section p .type {
width: 75%;
margin: .5%;
padding: .5%;
font-size: 1em;
color: #ffffff;
background-color: #696773;
border-radius: 5px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section a {
color: #ffffff;
text-decoration: none;
font-style: normal;
}
#contact-section a:hover {
text-decoration: underline;
}
.antispam ::-webkit-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-ms-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
#contact-section textarea {
width: 78%;
margin: .5%;
padding: .5%;
color: #ffffff;
background-color: #696773;
border-radius: 3px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section #message .button {
width: 20%;
margin: 1.5%;
font-size: .75em;
color: #696773;
background-color: #ffffff;
border: initial;
border-radius: 5px;
border: 1px solid #CCC0B7;
float: right;
}
#contact-section #message .button:hover {
color: #ffffff;
background-color: #696773;
}
/* Footer Section Styles */
footer #copyright {
margin-top: 10%;
padding: .5%;
text-align: center;
color: #686673;
background-color: #ffffff;
}
footer p {
text-align: center;
}
footer a {
padding: 0;
color: #F26DA5;
}
}
CSS Responsive
@media screen and (min-width: 300px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: hidden;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 70%;
margin: 40% 15% 25% 15%;
}
#logo-container img {
opacity: 1!important;
}
/* ************************************ Menu Styles ************************************ */
nav {
height: 30px;
padding-bottom: 1em;
background-color: #696773;
}
nav a {
font-size: .75em;
}
nav ul li a:hover {
outline: initial;
font-size: 1em;
}
#nav-bkg img {
visibility: hidden;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.25em;
}
p {
font-size: .85em;
text-align: justify;
}
#services-section {
width: 80%;
margin: 5% 10%;
padding: 0;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
#services-section h5 {
margin: 0;
padding: 0;
font-size: 1em;
border-top: none;
}
#specials {
width: 80%;
margin: 5% 10%;
padding: 0;
float: right;
}
#work-section {
width: 100%;
margin: 0;
padding: 0;
}
#work-section .slider img {
width: 96%;
margin: 2%;
padding: 0;
}
#contact-section {
width: 90%;
margin: 15% 0;
padding: 5%;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contact-section p {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#contact-section p .type {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section .contact-wrap {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
#contactform {
margin-top: 15%;
}
#contact-section textarea {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section #message .button {
width: 50%;
margin: 0;
padding: 0;
}
br {
display: none;
}
}
@media screen and (min-width: 500px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
margin: 45% 15%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#about-section {
width: 70%;
padding: 10% 15% 20% 15%;
}
#about-section p {
padding-bottom: 20%;
border-bottom: 1px solid #696773;
}
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#specials {
margin: 5% 10% 25% 10%;
}
}
@media screen and (min-width: 600px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 50%;
margin: 45% 25%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.5em;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
}
@media screen and (min-width: 700px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 40%;
margin: 40% 30%;
}
/* ************************************ Menu Styles ************************************ */
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
height: 400px;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
height: 400px;
padding: 0;
float: right;
}
#work-section .slider img {
width: 46%;
margin: 2%;
float: left;
}
}
@media screen and (min-width: 900px) and (max-width: 999px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: visible;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 30%;
margin: 15% 35%;
}
#logo-container img {
opacity: 1;
}
/* ************************************ Menu Styles ************************************ */
nav {
background-color: initial;
}
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
#nav-bkg img {
visibility: visible;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
border: none;
}
#services-section #fa-icon .icon {
width: 25%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
float: right;
}
#work-section {
padding-bottom: 5%;
}
#work-section .slider img {
width: 23%;
margin: 1%;
float: left;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contactform {
margin-top: 5%;
}
}
