How To Use Css Media Queries Correctly For Responsive Design

I have an issue with media queries. I want my main div to have a width of 960px but if the screen is smaller than 960 px - I want it to be 80% of any current width. I get only 80%

Solution 1:

For the sake of anyone else who finds this -- Firefox has supported media queries since version 3.5. I'm not sure why your copy of FF5 wasn't working, but it wasn't due to a lack of media query support. Here's a demo page. I tested it in FF3.6, and it works fine: http://oscorp.net/experiments/media-queries/

Solution 2:

I solved the problem -

I was using firefox 5.0 which I assume didn't support this feature - I guess that was the problem.