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

Jill Foster
Jill Foster
4,584 Points

On my Task 2 response, it keeps giving me an error that task 1 is no longer working. But I have changed nothing?

Submit Task 1 and passes.

Task 2, type in the correct response click submit.

Receive the error that Task 1 is no longer working. Go back to task one change nothing. resubmit and pass.

Go back to task 2 and receive same error!

Has anyone else had this problem?

css/main.css
@media screen and (min-width: 480px) {
   h1 {
    font-size: 2.5em;
  }
}

@media screen and (min-width: 660px) {
   h2 {
    font-size: 1.75em;
  }
}


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

1 Answer

Steven Parker
Steven Parker
231,269 Points

The error message may be misleading.

But .. you may have trouble completing the challenge if you place you work at the top of the file.

In general, media queries should go at the end of other CSS so they can take precedence over other settings when their conditions apply. In particular, this file contains a setting that will prevent the media query from working unless the media query comes after.

Change the placement of your work and you should pass the challenge.

Jill Foster
Jill Foster
4,584 Points

Thank you!

Yes this did seem to work as there was an h1 element farther down that was countering it. I understand the logic behind the flow, I just had not run into this being a problem with the question section. I removed part of that code first, but had I just put it at the bottom as you said, I would have had no issues at all!