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

Nick Tsamis
PRO
Nick Tsamis
Pro Student 4,267 Points

i have problem with my site layout

my media queries are not working

responsive.css

@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="https://fonts.googleapis.com/css?family=Changa+One:400,400i" rel="stylesheet"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/main.css">

</head>

2 Answers

Brian Jensen
Brian Jensen
Front End Web Development Techdegree Graduate 44,164 Points

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; } }