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

Stephen Garner
PLUS
Stephen Garner
Courses Plus Student 11,241 Points
Posted by Stephen Garner
Stephen Garner
Courses Plus Student 11,241 Points

I'm getting a bummer! error.

Why does this not work?

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

4 Answers

Ahmed SALMI
Ahmed SALMI
18,235 Points
Ahmed SALMI
Ahmed SALMI
18,235 Points

You have to put the media in the end of css file also you forgot the coma(;)

Stephen Garner
PLUS
Stephen Garner
Courses Plus Student 11,241 Points
Stephen Garner
Stephen Garner
Courses Plus Student 11,241 Points

Thank you for your help. But, doesn't it typically go at the top? Or in a separate file?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stephen,

Generally, media queries would go at the end of your file if using a single css file or in a separate file but loaded after your mobile styles.

Here's the problem that happened when you put it at the top.

Focusing on h1 rules only:

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

/* further down the file and outside the media query */

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

The media query sets the font-size to 2.5em but then further down the file it's overridden and set to 1.75em

You want it to happen the other way around. It's 1.75em at mobile styles and then overridden in the media query at larger screen sizes.

Stephen Garner
PLUS
Stephen Garner
Courses Plus Student 11,241 Points
Stephen Garner
Stephen Garner
Courses Plus Student 11,241 Points

My initial code did have the semi-colon, but I rewrote it so many times I missed it when I submitted this post.

Ahmed SALMI
Ahmed SALMI
18,235 Points
Ahmed SALMI
Ahmed SALMI
18,235 Points

Normally you will put it in seperated files .