Question

Hello I’m using the fluid layout grid system or responsive web design.

I like how I can set the size of everything for lower resolution with media queries but here is my question.

I want the user no matter how large his screen resolution to be 960px in width so a user viewing on his iPhone would get the smaller version, but a user who has 1000×621 or higher it stays the same so the header h1 wont scroll.

Any help would be greatly appreciated,

Thank you

This is the css I have

 @media only screen and (min-width: 769px){

.gridContainer {
width: 89.0217%;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: 0 auto;
}

#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

 }

 #header h1 {
text-align:right;
 }

#top_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #bottom_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

#featured_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

}

Answer 1

Simply use media queries, for example :

@media (min-width: 1000px){ 

#header h1 {
 /* blah blah ... */
}

}

So only users with viewport width greather than 1000px will only include the css class in the brackets. You can play with min-width or max-width.

Ref : http://www.w3.org/TR/css3-mediaqueries/