title: Fallback / Responsive CSS Styles
body: <p>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? </p>
  
  <p>My site is <a href="http://jcwebandgraphic.com/" rel="nofollow">http://jcwebandgraphic.com/</a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;body&gt;
          &lt;!-- #nav-bkg: Nav BKG Image Scrollstop --&gt;
          &lt;div id='nav-bkg' class='scroll'&gt;
              &lt;img src='images/dandelion-nav-color.png'&gt;
              &lt;img src='images/dandelion-nav.png'&gt;
          &lt;/div&gt; &lt;!-- Closes #nav-bkg --&gt;
  
  
          &lt;!-- nav: Top Nav --&gt;
          &lt;nav role='navigation'&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href='#services-section'&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- 
                      &lt;li&gt;&lt;a href='#products-section'&gt;Products&lt;/a&gt;&lt;/li&gt;
                  --&gt;
                  &lt;li&gt;&lt;a href='#work-section'&gt;Work&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href='#contact-section'&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt; &lt;!-- Closes Top Nav --&gt;
  
  
          &lt;!-- #logo: Logo --&gt;
          &lt;div id='logo-container'&gt;
              &lt;img id='logo' src='images/logo2.png'&gt;
          &lt;/div&gt; &lt;!-- Closes #logo --&gt;
  
  
          &lt;!-- #page-wrapper Page Wrapper --&gt;
          &lt;div id='page-wrapper' role='main'&gt;
              &lt;!-- .scroll: Site BKG Image Scrollstop  --&gt;
              &lt;div class='scroll'&gt;
                  &lt;img src='images/dandelion-color.jpg'&gt;
                  &lt;img src='images/dandelion-greyscale.jpg'&gt;
              &lt;/div&gt; &lt;!-- Closes .scroll --&gt;
  
  
              &lt;!-- #about-section: About Me--&gt;
              &lt;section id='about-section'&gt;
                  &lt;h2 class='subtitle'&gt;About Us&lt;/h2&gt;
                  &lt;p&gt;
                      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.
                  &lt;/p&gt;
              &lt;/section&gt; &lt;!-- Closes #about-section --&gt;
  
  
              &lt;!-- #services-section: Service Types Offered --&gt;
              &lt;section id='services-section' class='main-section-styles'&gt;
                  &lt;h2 class='subtitle'&gt;Services&lt;/h2&gt;
                  &lt;!-- .fa-icon: Large FA Icon Container --&gt;
                  &lt;div id='fa-icon'&gt;
                      &lt;div class='icon'&gt;
                          &lt;i class='fa fa-laptop icon-fixed-width fa-3x'&gt;&lt;/i&gt;
                          &lt;h5&gt;Web&lt;/h5&gt;
                      &lt;/div&gt;
                      &lt;div class='icon'&gt;
                          &lt;i class='fa fa-magic icon-fixed-width fa-3x'&gt;&lt;/i&gt;
                          &lt;h5&gt;Graphic&lt;/h5&gt;
                      &lt;/div&gt; 
                      &lt;div class='icon'&gt;
                          &lt;i class='fa fa-connectdevelop icon-fixed-width fa-3x'&gt;&lt;/i&gt;
                          &lt;h5&gt;Hosting&lt;/h5&gt;
                      &lt;/div&gt;
                      &lt;div class='icon'&gt;
                          &lt;i class='fa fa-wrench icon-fixed-width fa-3x'&gt;&lt;/i&gt;
                          &lt;h5&gt;IT&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- Closes .fa-icon --&gt;
              &lt;/section&gt; &lt;!-- Closes #services-section --&gt;
  
  
              &lt;!-- #specials: Specials --&gt;
              &lt;section id='specials' class='main-section-styles'&gt;
                  &lt;h2 class='subtitle'&gt;Specials&lt;/h2&gt;
                  &lt;div class='offer'&gt;
                      &lt;p&gt;
                          Static Single-Page Site just $99!
                      &lt;/p&gt;
                      &lt;p&gt;
                          2 Years of Hosting + IT just $75!
                      &lt;/p&gt;
                      &lt;br&gt;
                      &lt;span&gt;
                          Offers end November 1st, 2015
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/section&gt; &lt;!-- Closes #specials --&gt;
  
  
              &lt;!-- #work-section: Portfolio Examples --&gt;
              &lt;section id='work-section' class='main-section-styles'&gt;
                  &lt;h2 class='subtitle'&gt;Work&lt;/h2&gt;
                  &lt;ul class='slider'&gt;
                      &lt;img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'&gt;
                      &lt;img src='images/air.jpg' alt='Professional Project: Audio Information Radio'&gt;
                      &lt;img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'&gt;
                      &lt;img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'&gt;
                      &lt;img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'&gt;
                      &lt;img src='images/placestory.jpg' alt='Student Project: This is Me'&gt;
                      &lt;img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'&gt;
                      &lt;img src='images/zavaah.jpg' alt='Student Project: Zava&amp;apos;ah, An Ethical Will'&gt;
                  &lt;/ul&gt;
              &lt;/section&gt;
  
  
              &lt;!-- #contact-section: Contact Form &amp; Info --&gt;
              &lt;section id='contact-section' class='main-section-styles'&gt;
                  &lt;h2 class='subtitle'&gt;Contact&lt;/h2&gt;
                  &lt;br&gt;&lt;br&gt;
                  Phone: &lt;a href='callto:+13602810359'&gt; 360-281-0359&lt;/a&gt;
                  &lt;address&gt;Email: &lt;a href='mailto:info@jcwebandgraphic.com'&gt; info@jcwebandgraphic.com&lt;/a&gt;&lt;/address&gt;
  
                  &lt;br&gt;
  
                  &lt;div id='contactform'&gt;
                      &lt;form action='contact.php' method='post'&gt;
                          &lt;div class='contact-wrap'&gt;
                              &lt;p&gt;Your Name :&lt;input class='type' type='text' name='cf_name'&gt;&lt;/p&gt;
  
                              &lt;p&gt;Your E-mail:&lt;input class='type' type='text' name='cf_email'&gt;&lt;/p&gt;
  
                              &lt;p class='antispam'&gt;Spam-Bots!:&lt;input class='type' type='text' name='url' placeholder='** Leave Blank **'&gt;&lt;/p&gt;
                          &lt;/div&gt;  
  
                          &lt;div class='contact-wrap'&gt;
                              &lt;p id='message'&gt;
                              Message:
                                  &lt;textarea name='cf_message'&gt;&lt;/textarea&gt;
                                  &lt;input class='button' type='submit' value='Send'&gt;
                                  &lt;input class='button' type='reset' value='Clear'&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt; &lt;!-- Closes #contactform --&gt;
              &lt;/section&gt; &lt;!-- Closes #contact-section --&gt;
  
              &lt;footer&gt;
                  &lt;p id='copyright'&gt;
                      &amp;#169; JC Web &amp; Graphic 2015
                  &lt;/p&gt;
                  &lt;!-- 
  
                      &lt;p&gt;
                          &lt;a href='resume.pdf' target='_blank'&gt;Download Resume&lt;/a&gt;
                      &lt;/p&gt;
  
                  --&gt;
              &lt;/footer&gt;
          &lt;/div&gt; &lt;!-- Closes #page-wrapper --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Fallback</p>
  
  <pre><code>@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;
                      }
  }
  </code></pre>
  
  <p>CSS Responsive</p>
  
  <pre><code>@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%;
                  }
  }
  </code></pre>