CODEWITHSUNDEEP
css
Strontium_99
Strontium_99

Reputation: 1803

CSS3 media calls not working

This has got to be something stupidly simple and it was working. I'm playing around with css3 media calls to build a responsive website, and can't for the life of me see why the following doesn't work anymore.

Here the page code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>

<link href="assets/css/layout.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>
</html>

And the layout.css:

body {
background-color:#FFF;
}

@media screen and max-width 980px {
body {
background-color:aqua;
}
}

@media screen and max-width 700px {
body {
background-color:#ff4500;
}
}

@media screen and max-width 480px {
body {
background-color:#ffd700;
}
}

What's wrong with that?

Thanks.

Upvotes: 0

Views: 103

Answers (2)

Aaron
Aaron

Reputation: 5227

I've noticed a couple formatting issues in your media queries; try using this formatting instead:

@media screen and (max-width: 700px) {

    ...

}

Upvotes: 2

James Coyle
James Coyle

Reputation: 10398

Put something in the body tags. Because it is empty it isn't being shown.

Upvotes: 0

Related Questions