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

I can't go ahed in this challege, is for me create a breakpoint for resolutions 480px and set h1 to 2.5 em:

my code

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

what is wrong?

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

thanks, i already done, is for the cascading...

Steven Parker
Steven Parker
221,322 Points

Congratulations, Carlos, on resolving your own issue. :+1:

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,028 Points

Yes the media query needs to go at the bottom. Carlos is saying he solved it by moving it there due to the cascading nature of CSS. CSS reads from top to bottom so any matching styles will be overridden by the style below the other.

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points

Place your media query at the bottom of the file.

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

This worked for me, placed as the last operation in the .css file.