Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Travis Ramey
Travis Ramey
1,631 Points
Posted by Travis Ramey
Travis Ramey
1,631 Points

what is a breakpoint?

For some reason when I type out the same code that is on in workspace its not working during the challenge.

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){
  {background:navy;}
}
Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

I would suggest to check carefully html files for things like link to 'Changa One' font, placements of ids and classes, and may be use 'background-color' property instead 'background' (the last line).

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

To answer your first question, a breakpoint is a term used when talking about using media quires to change the style at a certain pixel width. Like the code you have posted. You want to change the style at 480px's and change the background color to navy. By doing this you are changing the style at "breakpoints" or "pixel widths".

The code challenge issue is that you need to select the body element and give it a background-color of navy. in the media query.

First select the body element and add the style of background-color: navy like below.

body { background-color: navy; } remember when using CSS you first need to select the element you want to style then inside the open brackets use the selector you want to style your element.

I hope this helps.

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Travis

Breakpoints are used generally to change the layout of a page so that it still looks good on different screen sizes/densities, etc.

You're pretty close with your answer it looks like you've just forgotten to specify the body element to apply the background colour to within the media query.

So your code should be as below:

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

Hope it helps!

Stephen