Media queries have to go at theĀ endĀ of your CSS file. If your project has a #wrapper with a width of 960px, for example, you’d want to use a media query like this:
@media all and (max-width: 959px) {
/* media query rules go here */
}
In this case, the rule you’d probably want to put inside your media query would be:
#wrapper {
width: 90%;
}
So the end result would look like this:
@media all and (max-width: 959px) {
#wrapper {
width: 90%;
}
}
To see if your media query works, resize your page to under 960 pixels and see if your text wraps.