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

William Daniels
William Daniels
1,461 Points

How is the below incorrect? It's asking for h1 font size to be 2.5em for screens 480px or wider...

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

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points

Hi William,

It's incorrect because it's not where Media Queries should be in a Style Sheet.

Media Queries should be placed at the end of the sheet. You have to remember the "Cascading" part of CSS. Where you have the Media Query now, it will serve no function as further down the Style Sheet, there is another h1 rule for font-size which will override the Query, thus rendering it pretty useless.

But at the bottom, the Media Query will override the other h1 rule (like it's should do).

So, you just need to move the Media Query to where it belongs and you're good.

Keep Coding! :dizzy:

Jawann Carmona
Jawann Carmona
19,556 Points

You have a reference to your h1 tag later in your CSS that changes the size of the H1 tag and ignores the media query. You need to place your media query at the end of your CSS document so it looks like the following. In CSS, rules are overridden by any following rules unless they have an !important tag.

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