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

Peter Rossing
Peter Rossing
12,920 Points
Posted by Peter Rossing
Peter Rossing
12,920 Points

Problem with Code Challenge for breakpoint 480px and h1 set to 2.5em

Having problems with code for Challenge Task: breakpoint for devices 480 pixels wide or larger. set the h1 font-size to 2.5em.

Don't know why code below isn't correct. Am I missing something obvious? Does it matter what line this code is on? I have it at the top.

@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

Brandon Gibbs
Brandon Gibbs
9,636 Points

He's right... it doesn't ALWAYS matter... but take into account that CSS is cascading.... so it will follow the rules as they move down the screen.

Any changes that are being made to something previously determined, should be made AFTER the initial CSS rule. It's just best practice to include media queries below the rest of your code, or in their own file and that file linked below your main / style / custom.css files. :) Happy learning.

Peter Rossing
Peter Rossing
12,920 Points
Peter Rossing
Peter Rossing
12,920 Points

Thanks for the additional info! I had thought maybe the media query should be first because the type of screen would be the first thing I'd want to check. I guess my made-up logic is not how CSS works in the real world :(

Brandon Gibbs
Brandon Gibbs
9,636 Points

Trust me... not everything that is... is logical. I 100% understand your thinking there.

Think of it this way, the initial code that he's building is for mobile first... so that code is the base. The base needs to be run first... then any rules that change things because of screen size will need to be run after the fact. For instance, on a smaller mobile device (most of the time) the media queries will not affect any thing and the base code will run.

For the steps up to larger displays (larger displays and media queries) .... the base code will run then check to see what if any changes need to be made for display on the current screen size.

I hope that helps.

Peter Rossing
Peter Rossing
12,920 Points
Peter Rossing
Peter Rossing
12,920 Points

Thanks. That explanation helps it to make more sense.

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

that challenge just wants it down at the bottom. technically it doesn't matter, but sometimes these challenges can be finicky

Peter Rossing
Peter Rossing
12,920 Points
Peter Rossing
Peter Rossing
12,920 Points

Thanks for the clarification!