@media not responding W3C says code is good

Question

I have written some media queries that do not seem to be working. However when I validate them with W3C it says their are no errors.

Why are my font weights and background colours not changing. My HTML correctly links to my CSS. The following is my CSS:

@media (max-width: 800px) {

    body {
        background-color: red;
    }

    h1 {
        font-weight: 300;
    }
}

@media (min-width: 801px) and (max-width: 1000px) {

    body {
        background-color: orange;
    }

    h1 {
        font-weight: 600;
    }
}

@media (min-width: 1001px) {

    body {
        background-color: yellow;
    }

    h1 {
        font-weight: 900;
    }
}

As requested this is the head:

<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link type="text/css" rel="stylesheet" src="css/style.css" />
</head>

Above code looks good to me, must be something else. Mind show us the url that has this problem? — Godinall, May 22 '14 at 13:14
That code above is working as expected: http://jsfiddle.net/feeela/ydtW6/ What is the problem? — feeela, May 22 '14 at 13:14
It **does** work in Chrome and Safari. As Godinall said – there must be another source for your problem. As it is, your question does not provide enough information to get you helped. — feeela, May 22 '14 at 13:16
Just checked Chrome 35 and Safari 5.1, and the JSFiddle demo works fine, as expected. — Nick R, May 22 '14 at 13:17
Works in @feeela's fiddle. You might try adding qualifier like so `@media all (...` — Jongosi, May 22 '14 at 13:17

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

Make sure you have this in your head tag:

<meta name="viewport" content="width=device-width" />

Found something similar:

CSS3 media queries not working

edited May 23 '17 at 10:27

Community

1
1

answered May 22 '14 at 13:18

Riskbreaker

4,621
1
23
31

2

There's nothing *wrong* with this answer - it might even prove helpful for future visitors, so why downvote it? – Jongosi May 22 '14 at 13:19
I always can find an answer that **probably** matches the question. But that is like looking into a crystal ball – not answering based on facts. But indeed I reverted my downvote – as downvotes should bes used for "answers that are not useful"… – feeela May 22 '14 at 13:20
1

Yeah things like having this cannot hurt the user to try/have – Riskbreaker May 22 '14 at 13:23
Thanks for this. This hasn't solved my problem though. – DanMad May 22 '14 at 13:30
My advice is to add your head section, some content in the bode in fiddle so we can see whats the issue – Riskbreaker May 22 '14 at 13:33
yeah my only other guess is that you **might have a broken tag on your css file** causing the meta to break...go check your 'css/style.css'. – Riskbreaker May 22 '14 at 13:44
No broken tags. How very frustrating. Thanks Riskbreaker – DanMad May 22 '14 at 13:54

score 0 · Accepted Answer · answered May 22 '14 at 14:25

Wow!

It is late where I am and I have been looking at my code too long.

The problem was in my head. I was using "src" instead of "href" when trying to link my external CSS.

Worst public shaming ever.

Should read:

<link type="text/css" rel="stylesheet" href="css/style.css">

@media not responding W3C says code is good

2 Answers2