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

Question

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

Answer 1 · 2015-05-21T20:59:56Z

May 21, 2015 8:59pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Virginia Chubo

Virginia Chubo

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

1 Answer

jacobproffer

jacobproffer