2 different breaking points for one div doesn't work..? - css

Question

I am trying to set 2 different width to #home-content-wrap. What I eventually want is to be able to set to home-content-wrap div 80% width if the screen size is smaller than 768px!
It is like:
1156 width:80%
<1156 width:100%
<768 width: 80%
Couple of notes:
But <768 width:80% doesn't wok!
If I remove >1156 condition then <768 works!
If you look the code carefully you ll see that <768 condition changes text color but not width...or not bg color too..
Here is my page/div style:
*{margin:0;padding:0;text-align:center;}
#wrap{width:100%;height:100%;}
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid blue;}
/**Responsive Columns**/
.home_lay_1_of_2 {
width: 49.5%;
margin-left:0.50%; background:lightblue;
}
.home_lay_1_of_3 {
width: 49.5%; background:grey;
}
here is breaking points:
/****breakpoint 1**/
#media only screen and (max-width: 768px) {
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color:
yellow; border:1px solid yellow;}
.home-txt{float:left; width:100%; height:500px; }
.home_lay_1_of_2 {
width: 100%;
margin-left:0;
}
.home_lay_1_of_3 {
width: 100%;
}
}
/***Breakpoint 2***/
#media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid black;}
}
here is my responsive settings:
.section {
clear: both;
padding: 0;
margin: 0;
}
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.col {
display: block;
float:left;
}
Here is the fiddle http://jsfiddle.net/GQgNx/
What's wrong here?

Answer 1

Change the second breakpoint media query to:
#media only screen and (min-width: 768px) and (max-width: 1156px) {
#home-content-wrap {
border: 1px solid black;
height: auto;
margin: 50px auto;
max-width: 1600px;
width: 100%;
}
}
Example: http://jsfiddle.net/GQgNx/2/

Answer 2

I have updated your fiddle with some cleaner code. It's just an issue of the way your media queries were setup.
Your outline should be something like this:
/** narrow code default **/
#media only screen and (min-width:768px) {
}
#media only screen and (min-width:768px) and (max-width:1156px) {
}
#media only screen and (min-width:1156px) {
}
Updated fiddle http://jsfiddle.net/GQgNx/5/