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 MUZ140714 Peter Nyamadhinya
MUZ140714 Peter Nyamadhinya
4,974 Points

i changed the background color to dark green for devices larger than 660px .i don"t know what to do now

after the first breakpoint,create a second for the devices 660 pixels wide or larger . inside the breakpoint , set the body background to the color green.

css/main.css 
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; 
}
ceecee yeretsky
ceecee yeretsky
1,578 Points

the first part was right but the second part is wrong

3 Answers

jacobproffer
jacobproffer
24,604 Points

Hey Peter,

It looks like you're missing a few closing curly brackets. If you take a look at your code, you'll notice that you've targeted the body element and have included an opening curly bracket in both cases. However, there doesn't seem to be a closing curly bracket to end the styling of the body in either media query.

Take a look here:

@media screen and (min-width: 480px){
    body { 
        background: navy;
    }   //Close here
}
@media screen and (min-width:660px){
    body {
        background: darkgreen; 
    }   //Close here
}

Best,

Jacob

ceecee yeretsky
ceecee yeretsky
1,578 Points

you are so wrong stop putting false information on this website before a get my giant friend alexa on you

ceecee yeretsky
ceecee yeretsky
1,578 Points
ceecee yeretsky
ceecee yeretsky
1,578 Points

2+2=4

Jarvis Chandler
Jarvis Chandler
7,619 Points
Jarvis Chandler
Jarvis Chandler
7,619 Points

The second part will not let me move on why?