Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by Bradley CP
Bradley CP
2,439 Points

Responsive web design problem..

"after the first breakpoint create a second breakpoint for devices 660 pixels wide or large. Inside the breakpoint set the body background to the color darkgreen"

thats my question but I continue to put in what i learnt from the lesson but it won't accept it as my answer... please help!

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

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

  @media screen and (min-width: 660px) {

body{
    background: darkgreen;
}

this is what I have in my answer feed for my quiz..

the last lines are what are giving me issues

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Hi Bradley,

Could you include your code in the question or a link to the code challenge? :)

2 Answers

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points 
@media screen and (min-width: 660px) {
  body {
    background-color: darkgreen;
  }
}

And you cannot forget the meta viewport tag in the head section

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

The meta tag can be slightly different from what you've seen here at Treehouse, but the premise is the same. Also, you HAVE to use the Markdown Cheatsheet, located underneath this very box you make posts with, so that we can look at your code! It's hard to guess what you're trying to ask without seeing it...

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

So what I think Lush was saying is that you were missing the closing curly brace on your first media query block so you couldn't start a new one @ 660px. The general rule of thumb is that each opening curly brace requires a closing one. This applies in most programing languages as well (javascript, php, etc.). This is one of those things that will occasionally come up in your code and sometimes difficult to identify.

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

He doesn't have a closing curly brace on either @media block. Hopefully he sees now where the problem is...