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

Rasmus Sjørslev
Rasmus Sjørslev
3,696 Points

media query does not seem to work in the challenge task

i am using the following in the media query challenge:

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

but it does not validate it?

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

1 Answer

Tobias Helmrich
Tobias Helmrich
31,601 Points

Hey Rasmus,

you did a good job! The only thing you did wrong is putting the media query in the beginning. You have to put the media query in the end and it should work! :)

The reason why you have to do this is because of the cascading nature of CSS your media query will be overwritten later. In particular the media query you're writing now will be overwritten by this part as the font-size will be set to 1.75em instead of your specified 2.5em:

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

So like I said, just put your media query in the end and everything should work! If you have further questions feel free to ask, good luck! :)

Rasmus Sjørslev
Rasmus Sjørslev
3,696 Points

Hi Tobias,

Thank you for the answer - that did the job :) i can see other people have asked the same questions but i missed that in the forum.

thanks!