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

Rasmus Sjørslev
Rasmus Sjørslev
3,696 Points
Posted by 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,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 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
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!