Why are only my large media queries working?

Question

I have been adding media queries to make my site more responsive. The larger queries (min-width 1536px and min-width 1224px) work fine. However, when I apply the styles to smaller sizes none of the styles show up at all. I don't understand why they won't, I know somethings might not fix with out adjusting sizes and positions but the colors aren't working which leads me to believe that I have done something wrong with the @media part itself.

http://www.codeply.com/go/z6EPsEzrOx

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Header */

header .img-responsive {
    padding-top: 2%;
    margin-left: auto;
    margin-right: auto;
}


/* Body */
#top {
    background-color: #FA7862;
    width: 100%;
    height: auto;
}

#top h1, h2 {
    text-align: center;
    color: rgb(255, 255, 255);
}

#top h1 {
    font-size: 22px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin-top: 2.5%;
}

#top h2 {
    font-size: 18px;
    margin-top: 1%;
}

#top hr {
    line-height: 1em;
}

.info {
    position: relative;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 2.5%;
    font-size: 16px;
    color: black;
    font-family: "Lucida Console", Monaco, monospace;
    background-color: white;
    padding: 1% 2% 1% 2%;
    text-align: justify;
    border: solid grey 2px;
}

.connect {
    margin-left: 5%;
    color: white;
    width: 100;
    display: inline-block;
    padding-top: 5%;
    text-align: center;
    margin-bottom: 2.5%;
}

.connect p {
    margin-top: 5%;
    font-size: 16px;
}

.create {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.create p {
    margin-top: 7.5%;
    font-size: 16px;
}

.publish {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.publish p {
    margin-top: 7.5%;
    font-size: 16px;
}

/* Bottom */

body {
    background-color: rgb(242, 242, 242);
}

#bottom h1 {
    font-size: 18px;
    font-family: "MS Sans Serif";
    color: black;
    text-align: center;
    position: relative;
}

#mce-EMAIL
{
    font-size: 20px;
    font-family: "MS Sans Serif";
    color: rgb(153, 153, 153);
    text-align: center;
    float: left;
    width: 70%;
    height: 40px;
}
input.button
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    background-color: #fa7862;
    color: rgb(255, 255, 255);
    border: none;
    text-align: center;
    width: 30%;
    height: 40px;
    float: right;
}

#mc_embed_signup
{
    background-color: rgb(255, 255, 255);
    position: relative;
    display: block;
    left: 37.5%;
    width: 30%;
    height: 40px;
}


/* Footer */

footer {
    text-align: center;
    position: relative;
    margin-top: 2%;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Header */

header .img-responsive {
    padding-top: 2%;
    margin-left: auto;
    margin-right: auto;
}


/* Body */
#top {
    background-color: #FA7862;
    width: 100%;
    height: auto;
}

#top h1, h2 {
    text-align: center;
    color: rgb(255, 255, 255);
}

#top h1 {
    font-size: 22px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin-top: 2.5%;
}

#top h2 {
    font-size: 18px;
    margin-top: 1%;
}

#top hr {
    line-height: 1em;
}

.info {
    position: relative;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 2.5%;
    font-size: 16px;
    color: black;
    font-family: "Lucida Console", Monaco, monospace;
    background-color: white;
    padding: 1% 2% 1% 2%;
    text-align: justify;
    border: solid grey 2px;
}

.connect {
    margin-left: 5%;
    color: white;
    width: 100;
    display: inline-block;
    padding-top: 5%;
    text-align: center;
    margin-bottom: 2.5%;
}

.connect p {
    margin-top: 5%;
    font-size: 16px;
}

.create {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.create p {
    margin-top: 7.5%;
    font-size: 16px;
}

.publish {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.publish p {
    margin-top: 7.5%;
    font-size: 16px;
}

/* Bottom */

body {
    background-color: rgb(242, 242, 242);
}

#bottom h1 {
    font-size: 18px;
    font-family: "MS Sans Serif";
    color: black;
    text-align: center;
    position: relative;
}

#mce-EMAIL
{
    font-size: 20px;
    font-family: "MS Sans Serif";
    color: rgb(153, 153, 153);
    text-align: center;
    float: left;
    width: 70%;
    height: 40px;
}
input.button
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    background-color: #fa7862;
    color: rgb(255, 255, 255);
    border: none;
    text-align: center;
    width: 30%;
    height: 40px;
    float: right;
}

#mc_embed_signup
{
    background-color: rgb(255, 255, 255);
    position: relative;
    display: block;
    left: 37.5%;
    width: 30%;
    height: 40px;
}


/* Footer */

footer {
    text-align: center;
    position: relative;
    margin-top: 2%;
}
}

Answer 1

One way to go about this is to write your styles for a larger screen size, then adjust it with media queries for smaller screens. As your code stands, there's a gap between 1024 and 1224. So what I suggest is designing your page first at 1224 outside your media queries. Then use a media query for 1024, and a second one for 768. Likely you'll also need to target smaller sizes after that. Place each successively smaller size below the other, and use min-width:

//css code for large screen
//then:

@media screen and (min-width:1024px){//styles}

@media screen and (min-width:768px) {//styles}

@media screen and (min-width:400px) {//styles}

Answer 2

Use min-width and max-width instead of min-device-width and max-device-width.