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

Francesco Vitale
Francesco Vitale
4,962 Points

why is the code not working ? :@media screen and (min-width: 480px;) { h1 {font-size: 2.5em;}}

Why is the code don't working? Can anyone give me help with that? thank you

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

3 Answers

Steven Parker
Steven Parker
231,198 Points

You should always place media queries at the end of the CSS.

That way they can take precedence over other rules of equal specificity when they apply. In this case, there's already a rule in the file for h1 that will override the media query otherwise.

You also have a syntax error caused by a stray semicolon in the first line.

+1 for catching the semi-colon. Even though that wasn't the entirety of the problem, I missed it at first glance.

Francesco Vitale
Francesco Vitale
4,962 Points

Thank you James ,it was part of the problem and you helped me figure out it!

If you're referring to the media query at the top, then moving it to the bottom should function the way you expect. Since it is a cascading style sheet, the h1 values lower in the sheet are overriding your media query changes.

Francesco Vitale
Francesco Vitale
4,962 Points

thank you mwagner , it was helpful!