HTML5 Media query based css link not working

Question

In my html page, i am using the media query based css but it's not working.

html :

<!DOCTYPE>
<html>
    <!--[if IE 9]>
        <html lang="en-us" class="ie9">
    <![endif]-->

<head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../css/login.css">
        <link rel='stylesheet' media='screen(min-device-width : 320px) and (max-device-width : 480px)' href='../css/max480.css' /> //properly linked.
        <title>Welcome to ClearBid Login</title>
</head>
<body class="loginPage">

css :

.loginContent > section {
    background: none; //it always visible.
}

What else i need to do?

A brief demo would be more helpful. – Paulie_D Jan 16 '15 at 15:51 — Paulie_D, Jan 16 '15 at 15:51

chaenu · Accepted Answer · 2015-01-16T16:50:28.213

1

There's a "and" missing. You need to combine every statement in the [media] attribute with a "and":

screen and (min-device-width: 320px) and (max-device-width: 480px)

Oh hey and there's an error on top of your html file with the conditional comments. IE9 sees two opening HTML-Elements, which could cause the compatibility mode. Correct would be:

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us" class="not-ie9">
<!--<![endif]-->

edited Jan 16 '15 at 16:50

answered Jan 16 '15 at 16:08

chaenu

1,915
16
32

But it seems that, in ie9 `screen and (min-width:320px) ` works but `min-device-width: 320px` - not working – 3gwebtrain Jan 16 '15 at 16:34
Do you have compatibility mode turned on? See first answer here http://stackoverflow.com/questions/6418139/media-query-not-working-in-ie9 – chaenu Jan 16 '15 at 16:40
i use : `` - is not ok? - can you have a look in to my html which I posed in question – 3gwebtrain Jan 16 '15 at 16:46

score 0 · Answer 2 · answered Jan 16 '15 at 16:26

Replace your line with the following:

<link rel='stylesheet' media='screen and (min-device-width: 320px) and (max-device-width: 480px)' href='../css/max480.css' />

You can also use the CSS instead:

@media screen and (min-width: 320px) and (max-width: 480px) {
  // your style
}

score -1 · Answer 3 · answered Jan 16 '15 at 15:56

You can add the media query into the css file itself. So in css:

@media screen and (min-width:320px) and (max-width:480px) {
    .loginContent > section {
          background: none; //it always visible.
    }
}

This will reduce HTTP requests once you add more media queries.

HTML5 Media query based css link not working

3 Answers3