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.

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
215,959 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!