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

Kara Marotta
Kara Marotta
2,799 Points
Posted by Kara Marotta
Kara Marotta
2,799 Points

Why will this not work? @media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }

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

this should work. it will not

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;
}
Cheo R
Cheo R
37,150 Points
Cheo R
Cheo R
37,150 Points

Try moving your media queries to the bottom.

Sandro Hallado
Sandro Hallado
4,231 Points
Sandro Hallado
Sandro Hallado
4,231 Points

can you display your html as well please

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

To provide an explanation as to "why" ...

Media queries need to be placed at the bottom of the CSS sheet, so not to be overwritten by rules further down the sheet. Remember the "C" => "Cascading"

Using this as an example, with the Media Query at the top, the h1 font-size is being set to 2.5em. But, if you scroll down the sheet, there is another rule for the h1 that is setting the font-size to 1.75em. So, now the Media Query is unless, as it's rule is being overwritten by this one.

To prevent this from happening and having your responsive design break, it is a very good practice to always have the Media Queries at the end of the file.

Hope that helps to make sense for you!

Keep Coding! :)

:dizzy:

Kara Marotta
Kara Marotta
2,799 Points
Kara Marotta
Kara Marotta
2,799 Points

Thank you! moving it to the bottom worked perfectly!