My goal is to create a responsive layout utilizing code and examples from this website: www.responsivegridsystem.com
To achieve this, I have nested a few containers to ensure a content area of 960px width centered within a 1000px container.
My plan is that when the width is less than 960px, both containers should expand to 100% width. While the layout appears as intended in full size, it does not respond correctly when the width is below 960px.
This is my current CSS (with some adjustments based on recommendations but still not functioning correctly):
.masterContainer {
position:relative;
margin:0 auto;
margin-top:-10px;
background-color:#FFF;
width:1000px;
overflow: hidden;
}
.pageContainer {
position:relative;
display:table;
margin:0 auto;
width:960px;
overflow:hidden;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 70%;
}
.span_1_of_3 {
width: 30%;
}
@media only screen and (min-width: 481px and max-width: 960px) {
.masterContainer {
width:100%;
}
.pageContainer {
width:100%;
}
}
@media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML
<div class="masterContainer">
<div class="pageContainer">
<div class="section">
<div class="col span_3_of_3" id="header">Header
</div>
<div class="col span_3_of_3" id="slideshowContainer">Slideshow
</div>
</div>
<div class="section group">
<div class="col span_2_of_3" id="contentArea">
This is column 1
</div>
<div class="col span_1_of_3" id="rightColumn">
This is column 2
</div>
</div>
<div class="col span_3_of_3" id="footer">Footer
</div>
<div class="col span_3_of_3" id="bottom">
</div>
</div>
</div>
Could there be an issue with my @media code or did something else go wrong?