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

create a breaking point for devices 480px wide or larger. inside the breaking point set background color to navy

did you change background color to navy? see my code i don't see anything wrong with

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 (min-width:480px){
  body{
    background :navy;
  }
}

2 Answers

craigschotchii
craigschotchii
9,115 Points
craigschotchii
craigschotchii
9,115 Points

Try

@media screen and (min-width: 480px)  {
  body{
    background: navy;
    }
  }
Jeff Benusa
Jeff Benusa
22,004 Points
Jeff Benusa
Jeff Benusa
22,004 Points

One little word is missing - you need to have 'and' in the first line of your rule.

Two conditions need to be met. It needs to be a digital screen AND the min-width needs to be AT LEAST 480px.

Add 'AND' between 'screen' and '(min-width:480px)'.

So close - keep up the good work.

Don't forget to vote for the best answer.