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

Posted by Nicole Wolcott
Nicole Wolcott
897 Points

failing to change h1 font size in a media query code challenge

I am doing the code challenge that asks me to create a media query for changing the font-size for the h1 headline to 2.5em for devices larger than 480px. I have combed over my code and can't see what I imagine to be an obvious error. Here is a cut and paste of my code.

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

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

andren
andren
28,558 Points
andren
andren
28,558 Points

There is nothing inherently wrong with the code you have written. But remember that in CSS the order of your rules matter to some degree. If there are multiple rules that target the same element, and modify the same properties then the rule that is specified last will win out (assuming they have the same Specificity).

The reason I bring this up is that if you look though the code you'll notice there is another rule in the file that also targets h1 elements and that also modifies their font-size. That rule will override your rule since it comes after it in the file. This is why media queries are traditionally placed at the end of a CSS file. Moving your media query to the bottom of the CSS file will allow you to complete the task.