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

Gurkan Oluc
Gurkan Oluc
734 Points
Posted by Gurkan Oluc
Gurkan Oluc
734 Points

What's the problem ?

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

css/main.css 
a {
  text-decoration: none;
}
@media screen and(max-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;
}

3 Answers

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

The code challenge is asking you to create a breakpoint for devices 480 pixels wide or larger. Your media query is creating a breakpoint for devices with a max-width of 480 pixels.

Change your max-width to min-width so that your breakpoint looks like this:

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

Also, make sure you put the media query CSS code at the bottom of the CSS file.

I verified that my code passed the challenge.

Gurkan Oluc
Gurkan Oluc
734 Points
Gurkan Oluc
Gurkan Oluc
734 Points

Me too but You write wrong says the program

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

Not sure what's going on, but the code works. I just copied it directly from above and pasted it below the other CSS code of the challenge and it passed.

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

In addition to what Roy said, your code is also missing a closing bracket for the media query. You also want this media query to be at the end of the provided code. This is because CSS is read top to bottom and since there is already a font-size declared for the h1, you want the media query to come after it so that it can change the h1 to a new font-size depending on the breakpoints in the media query.

Here's a link to Stack Overflow post regarding where to place media queries. Hope it helps clear things up :) http://stackoverflow.com/questions/24456981/why-do-i-have-to-put-media-queries-at-the-bottom-of-the-stylesheet