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

Posted by laurap
laurap
989 Points

Please help! Can't figure out why my media query code is incorrect

I'm not sure why my code is invalid? The only thing I can think is that I've added the code to the main.css sheet that's presented in the code challenge. Is there a way to add a responsive.css sheet during a code challenge, or is it something else entirely that I'm doing wrong?

Thanks!!

css/main.css 
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;
}

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

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You're soooooooooooo close! You're missing a grand total of one word. "and"

@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }
}
Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

You are missing one word. "and" needs to be there to say when it is a screen and the minimum width is 480px;

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

:-)! Thank you!

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Laura,

I just wanted to add that since you're working through the "How to Make a Website" course right now, you'll very likely take on the CSS Foundations course soon. When you get there, you'll notice that Guil will write his media queries like this:

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

Every time he does this, Workspaces will highlight his media query in red as if it wasn't correct. To avoid confusion, keep in mind that the media type part of the media query isn't required and will default to "all" if it's omitted. The media query will still work if you only state the screen size conditional.

Good luck with the course!

laurap
laurap
989 Points
laurap
laurap
989 Points

Thanks for the heads up!