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

Shane May
Shane May
5,114 Points
Posted by Shane May
Shane May
5,114 Points

@media breakpoints

I got the first task right, in which I set the background color of smaller screens. Now that I am setting the color to larger screens I am having trouble and am not sure why. Could any one help me?

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

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

The challenges are evaluated by a computer, so they're usually pretty specific about what they want. In this case, they asked you to add the second breakpoint after the one you did in the first part of the challenge. If you flip your code around, it should work.

Remember that CSS stands for cascading style sheets - order is important!

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

@media screen and (min-width: 660px) {
  body {
    background-color: darkgreen; 
  }
}
Michael Vandenburg
Michael Vandenburg
6,952 Points
Michael Vandenburg
Michael Vandenburg
6,952 Points

Remember that the C in CSS refers to how properties are set for a particular item until they're specifically overridden. The first media query in your code changes the background color of everything that's at least 660 pixels, regardless of any CSS that might have been applied before (possibly in a different CSS file on the HTML file that's using this) and leaves all the other properties the same, which continue to "cascade" until something else applies. A good example is farther down where the background of #gallery li is turned gray. Unfortunately, your second media selector also overrides the background color for devices wider than 480 pixels, which includes all devices wider than 660 pixels.