HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Nick Tsamis
Nick Tsamis
Pro Student 4,267 Points

i have problem with my site layout

my media queries are not working


@media screen and(min-width: 480px){ body{ background: navy; } }

@media screen and(min-width: 480px){ body{ background: darkgreen; } }

and my index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Tsamis | Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href=",400i" rel="stylesheet"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/main.css">


2 Answers

Brian Jensen
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

You have both break points set to break at 480px.

Change the second one to 660px.

@media screen and(min-width: 660px){ body{ background: darkgreen; } }