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

Gabriel Camacho
Gabriel Camacho
2,337 Points
Posted by Gabriel Camacho
Gabriel Camacho
2,337 Points

Error changing h1 on devices larger than 480px

Hello.

im doing the challenge for the media query where i have to change the h1 for devices larger that 480px and im not sure why the challenge keeps saying the im doing it wrong.

thanks.

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

Kai Nightmode
Kai Nightmode
37,045 Points

Quick guess, try moving the @media rule to the bottom of your CSS so it comes after the normal H1 rule.

Here is an abbreviated example with just the CSS pertaining to the H1 element.

h1, h2 {
  color: #fff;
}

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

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

If that doesn't do the trick, please let me know. :)

P.S. - You probably want to also add double quotes around the font-family "Changa One" since it has a space in it.

Gabriel Camacho
Gabriel Camacho
2,337 Points
Gabriel Camacho
Gabriel Camacho
2,337 Points

Thank you Daniel.

Of course it was the cascading part of the CCS that was giving me the error.