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

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

Code challenge on media queries

The process described in the video is not an option in the challenge. In the video it says to create a new CSS file called responsive.css. I believe that I added the correct code to the css/main.css that is provided but it doesn't pass the challenge??

<p> Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the body background to the color 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;
}

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

  }

</p>

Thanks.

7 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Looks like you are missing a colon after min-width. I tried it, and it worked.

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

  }

Also, if you are missing the closing curly brace on the media query then you should add it in. It could trip up css that comes after.

Awesome. Thanks very much.

Jason, Thanks very much for pointing that out.

So, what is wrong with my code:

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

So, what is wrong with my code:

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

I can't see anything wrong with it.

Do you have that at the end of all the css?

I just copied your code and pasted it into the code challenge and it passes.

Try refreshing the page or restarting your browswer.

The code challenge only accepted when I missed the final bracket, I think it has a bogus on the code checking the right answer!

You're saying that you removed the second closing brace and it passed?

I pasted in your code as is with both closing braces and it passed. Maybe it's a little glitch.

brandypineda
brandypineda
1,773 Points

Mine inly worked if i removed both closing curly brackets....same trick won't work for second task nor having seemingly correct code...