Media Queries Above 980 Pixels
View the demo.
CSS3 media queries are a useful tool to change the layout of a web page depending on the screen size of the device viewing it. There are plenty of examples of how to create a site suitable for mobile or tablet devices using media queries (including this post on my blog), but what about screen sizes larger than the standard desktop layout width of 980 pixels?
Media queries are usually applied to a standard layout. For devices that do support media queries, the layout will be realigned to suit the device, but for those devices that don’t support media queries (such as a PC using IE6), the standard desktop layout will be used.
What’s the problem?
A website using the technique described so far may be viewed by a device which supports media queries (such as a PC using Firefox 6) but has a screen size much larger than 980 pixels (devices with screen sizes over 2,500 pixels in width are quite common), yet will still be viewing a site at 980 pixels wide.
Why optimize a layout for screen sizes of the average layout width and below, but not above the average?
The answer to this question is two fold. Firstly, we still want to deliver the average layout width to devices that don’t support media queries (which means we must build the original layout to 980 pixels in width), and secondly, we will still want to set an upper limit to the width of our design.
We would wish to do this for usability and design decisions, such as keeping the line length of text to the optimum of 60 - 80 characters, and keeping images from being stretched too much and being distorted.
The solution
You have probably seen many layouts using the max-width media feature, but you can also target CSS to devices above a certain width using min-width. Using these two features, we can write media queries that will fit screen sizes from a top limit (in this case it is 1150 pixels, but you can set the top limit to whatever you like), down to a mobile device width of around 320 pixels, but also, as the original design (the CSS before the media queries are applied) is created to 980 pixels, users without media queries will be served the average layout size.
I have created a demo to highlight this process in action. The demo includes a button to toggle media queries on and off (as long as your browser supports JavaScript).
The media queries we need
Here is the CSS.
@media screen and (min-width: 1150px) {
.media-queries .row .center
{
width: 1116px;
}
}
@media screen and (max-width: 1149px) {
.media-queries .row .center
{
width: 96%;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 480px) {
.media-queries .row .center
{
padding: 0;
}
.media-queries .row .center div
{
float: none;
width: 100%;
margin: 17px 0;
}
}
As you can see, we are creating two queries with only 1 pixel in difference, the first to target screens with width of 1150 pixels and everything above (the width of 1116 pixels is due to the padding on the sides of the central div, and the .media-queries class is for toggling the effect in the demo), and the second to devices 1 pixel smaller, at 1149 pixels.
The third screen query is to align the layout to a mobile screen.
Media queries are a very powerful technique, so if just making a layout wider for larger screens is not enough to create a great design, you could use the positioning or display CSS properties to add, rearrange or reposition new or existing elements.
Using this technique makes targeting layouts to screen sizes of both above and below the average easy, so you can create the best user experience for the most users as possible.