Are you designing a website to work on everything from a Desktop to an iphone
Then this information will help you get on your way.

The code below sets different states for different screen sizes, starting from 980px and smaller in the first section. The second section captures one which is 700px in width down to 481px, then 480px to 321px & finally iphone ‘tiny’ sized 320px and less sized screens.

To capture any larger screen resolutions down to 980px in width; then put these conditions outside of an @media section (Normal CSS rules apply).

Remember to work from the largest size to the smallest! Otherwise your screen will just display the first set of conditions.
This confused the hell out of me so I thought I’d blog about it.

CSS below…

/* for 980px or less */
@media screen and (max-width: 980px) {

#pagewrap {
    width: 94%;
}
#content {
    width: 65%;
}
#sidebar {
    width: 30%;
 }
}

/* for 700px or less */
@media screen and (max-width: 700px) {

 #content {
    width: auto;
    float: none;
}

 #sidebar {
    width: auto;
    float: none;
 }
}

/* for 480px or less */
@media screen and (max-width: 480px) {

 #header {
    height: auto;
}

 h1 {
    font-size: 24px;
}

 #sidebar {
    display: none;
 }
}

/* for 320px or less */
@media screen and (max-width: 320px) {

 #header {
    height: auto;
 }

 h1 {
    font-size: 24px;
 }

 #sidebar {
    display: none;
 }
}