CODEWITHSUNDEEP
htmlcssmedia-queries
Maha1419
Maha1419

Reputation: 191

@import media queries css issue

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

Upvotes: 0

Views: 101

Answers (2)

Harish Singh
Harish Singh

Reputation: 3329

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

try this

Or you can use this

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

Upvotes: 0

SLaks
SLaks

Reputation: 887767

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

Upvotes: 3

Related Questions