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 Virginia Chubo
Virginia Chubo
1,182 Points

after the first breaking point create a second breaking point for devices 660px wide or lager. set body background to g

You did set the breaking point. The point i got it write i copied and made changes to back ground dargreen but it won't run

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;
}
@media screen and (min-width:480px)
  {
    body{
      background-color:navy;
      @media screen and (min-width:660px)
  {
    body{
      background-color:darkgreen;
    }


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

1 Answer

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Virginia,

There's a few things wrong here:

First off, if you take a look at your code as it is right now, you might notice that you have not closed your media query. You're missing a closing curly bracket. Further yet, you're going to need to write two media queries instead of one, as indicated by the prompts. One will target browsers with a minimum width of 480px and the second will target browsers with a minimum width of 660px.

Example if you're stuck:

@media screen and (min-width:480px) {
  body {
      font-size: 0.75em;
  }
}

@media screen and (min-width: 660px) {
  body {
      font-size: 1em;
  }
}

Note: The first media query should set the color of the body to navy and the second media query should set the color of the body to darkgreen.

For practicality, it's also best to write your media queries at the bottom of your stylesheet or if desired, in a separate stylesheet all together. This will assure that you will not have any cascading issues.

Best,

Jacob