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

Ashkan Entezari
Ashkan Entezari
3,956 Points
Posted by 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
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
Ashkan Entezari
Ashkan Entezari
3,956 Points

Thank you so much for your help!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 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
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,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 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
Dennis Marquez
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
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.