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

Brice Schultz
Brice Schultz
3,966 Points
Posted by Brice Schultz
Brice Schultz
3,966 Points

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

I don't understand what I'm doing wrong, my code.

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

css/main.css 
a {
  text-decoration: none;
}

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

#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;
}
Cristian Castro
Cristian Castro
Courses Plus Student 12,666 Points

Breakpoints should always go at the end of the document. Hope that helps.

Brice Schultz
Brice Schultz
3,966 Points
Brice Schultz
Brice Schultz
3,966 Points

@ Cristian Castro Thank you so much that worked. In the video the example was shown in a separate blank .css file so I must not have caught it if they mentioned that.

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

You should be aware of the REASON the placement makes a difference. The CSS file already contains a rule for h1 that includes the font-size property. And in CSS, when rules have equal specificity (like these), the latter one overrides any conflicting properties with those before it. So when you put your media query at the top of the file, the other h1 rule below it took precedence.

Now since the purpose of media queries is to change the properties on the devices they apply to, it only makes sense that they should be at the bottom of the file, or perhaps in a separate CSS file that is included after any others.