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

Zay Myo Tun
Zay Myo Tun
5,030 Points

can code quiz tell me what is wrong in detail?

@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } } I fail to see what is wrong here. I wish code quiz can give me hints what i did wrong so I don't need to post questions for help every time i run into problem.
just asking me the same thing as the question after "Bummer!" isn't really helping.

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

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;
}
Mark Dekin
Mark Dekin
26,839 Points

Can you put in the your question what the quiz question was?

Zay Myo Tun
Zay Myo Tun
5,030 Points

thank you very much for answering me. Just moving media query to the bottom of CSS solved the problem. thanks

1 Answer

andren
andren
28,558 Points

The challenge checker does indeed sadly not usually offer much detail or hints when it comes to challenges like this, if you don't know how to solve a challenge the recommended action is to do just what you are currently doing, posting the code in this forum and asking what is wrong with it.

Anyway I can see the problem with your solution, so I'll give you a pretty big hint, the problem is not with the media query itself, that is fine. But remember that in CSS the order or rules matter, when you have two rules with the same specificity for the selector then the rule that is defined last in the document will win out, and it should also be noted that rules defined in media queries are not prioritized over regular rules in the css file.

Zay Myo Tun
Zay Myo Tun
5,030 Points

thank you very much for answering me. Just moving media query to the bottom of CSS solved the problem. thanks