@import media queries css issue

Question

I am preparing my first responsive web layout.

I have prepared two css one is for normal mode and other one is for mobile mode.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" 
href="css/mobile.css" />
</head>

Desktop mode (CSS)

#face
{
background-image: url(../images/Face.png); 
background-repeat: no-repeat;
height:155px;
}

mobile mode (CSS)

#face
{
display:none;
}

But when decrease my browser window to mobile mode still #face this is displaying.

Kindly suggest me what I am doing wrong

Thanks in advance.

M

Answer 1

max-device-width measures the width of the screen, not the width of the browser.
Change that to max-width .

Answer 2

@media (max-width: 600px) {
    #face
    {
        display:none;
    }
}

try this

Or you can use this

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />

@import media queries css issue

Question

2 answers

solution1
3 ACCPTED 2013-10-29 13:52:31

solution2
0 2013-10-29 13:58:01

@import media queries css issue

Question

2 answers

solution1 3 ACCPTED 2013-10-29 13:52:31

solution2 0 2013-10-29 13:58:01

solution1
3 ACCPTED 2013-10-29 13:52:31

solution2
0 2013-10-29 13:58:01