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

Ashkan Entezari
Ashkan Entezari
3,956 Points

What's wrong with my code?

Question asks me to write a breakpoint for devices larger than 480 px and set the h1 font-size to 2.5em. Here's my solution which is not working! Can you help me?

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

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

Your Media Query is correct, but if you look down the rest of the css file you still have:

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

This is overiding your media query as it comes after, and styles sheets are cascading so the last declared value for font-size on h1 will be the font-size used.

Remove font-size: 1.75em; from the the h1 styles and your code will be accepted :)

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

Or alternatively move the media query after the h1 styles so the media query overides the styles set to h1.

Ashkan Entezari
Ashkan Entezari
3,956 Points

Thank you so much for your help!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,623 Points

Hi Ashkan,

Your code is correct, except that it needs to be at the bottom of the CSS file, not the top. Just move your code to the end and you'll be good to go.

Keep Coding! :)

Ashkan Entezari
Ashkan Entezari
3,956 Points

Thank you so much!

Is it because if I do so, it would just do the media query and ignore the rest?

Jason Anders
Jason Anders
Treehouse Moderator 145,623 Points

Correct. Remember the "C" in CSS stands for "Cascading."

So, in this example, you are setting the font-size for the h1 to 2.5em on screens larger that 480px, but a little further down, the h1 is set to 1.75em, so now for that screen size, the 2.5em is overwritten with the 1.75em.

:)

Dennis Marquez
PLUS
Dennis Marquez
Courses Plus Student 2,791 Points

Have the same problem. Even if I move the code down, or remove the other H1 font-size, it still says i's not correct. Getting really annoyed here as I want to move on. It works fine in my workspace. There's nothing wrong with my code, or the location of it.

Ashkan Entezari
Ashkan Entezari
3,956 Points

Look at my code above, if you place it at the bottom it works fine! Look what you're doing wrong and don't give up! It can be as simple as missing a semicolon or misspelling a word.