How to use css media queries correctly for responsive design

Question

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% from 960px and not 80% out of everything smaller (for example: 80% of 800px, 80% of 700px).

HTML:

<body>
    <div class="main">
         Some big amound of text
    </div>
</body>

CSS:

body{
    width:100%;
}

.main {
    display: block;
    height: 600px;
    width: 960px;
}

@media (max-width: 960px) {
    .main {
        width:80%;
    }
}

I want it to be fluid but it is fixed only on 2 positions: 960px and 80% of 960px - how do I make it fluid?

You need to post more of your html and css. Perhaps recreate the issue in jsfiddle.net as at the moment the css you have posted should be working. — tw16
– tw16, Commented Nov 26, 2011 at 20:50
What browser are you using? I've tested the code you provided in the latest versions of Safari, Chrome, Firefox, and Opera for OSX and it works as you said you'd like it to. — bookcasey
– bookcasey, Commented Nov 26, 2011 at 21:06
It works in chrome. I was using firefox 5.0 - I guess that was the problem... will update it and recheck. — Alon
– Alon, Commented Nov 26, 2011 at 21:15

Scott Vandehey · Accepted Answer · 2012-06-28 18:31:17Z

3

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/

answered Jun 28, 2012 at 18:31

Scott Vandehey

2622 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alon · Accepted Answer · 2011-11-26 21:27:01Z

1

I solved the problem -

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

answered Nov 26, 2011 at 21:27

Alon

7,78820 gold badges64 silver badges100 bronze badges

Collectives™ on Stack Overflow

How to use css media queries correctly for responsive design

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related