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

Ruzzel Maestro
Ruzzel Maestro
6,869 Points
Posted by Ruzzel Maestro
Ruzzel Maestro
6,869 Points

Is there a bug with this quiz?

This is the question : Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

My answer is :

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

and it still tells me I'm wrong.

What's the issue?

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

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

3 Answers

Jeremiah Bushau
Jeremiah Bushau
24,061 Points
Jeremiah Bushau
Jeremiah Bushau
24,061 Points

Hey, It is @media screen and (), rather than @media and screen()

@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }
}
Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Ruzzel,

Jeremiah is correct. However, the placement of the media query is also incorrect. You have it at the top of the stylesheet, and by doing that, the rule in the media query is going to be overwritten by the h1 rule further down the sheet. It's this reason that media queries should always go at the end of the stylesheet. So, fix up the syntax and move it down to the bottom, and the task will pass.

Keep Coding! :dizzy:

Ruzzel Maestro
Ruzzel Maestro
6,869 Points
Ruzzel Maestro
Ruzzel Maestro
6,869 Points

Awesome! Thanks guys. It's amazing how blind I was to not see these mistakes. I've checked my answer a dozen times, I was convinced the quiz was bugged,