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 Diane Donahue
Diane Donahue
899 Points

I have tried so many different combinations of code and just can't get this.

please help I feel so dumb

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 and (min-width: 480px) { h1 { font-size: 2.5em; }

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

@media screen and ( min-width: 660px ) {
  h2 {
     font-size: 1.75em;
  }

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hi Diane,

First, you seem to have two of each query. You'll need to delete one set (I would do those two that are single lines, as they don't really follow the CSS conventions.

Second, you have almost everything correct. You are just missing the closing curly brace for each query. You have the opening one... then the opening and closing for the CSS rule inside, but no closing one for the Media Query.

Just add one for each query and the rest is good to go.

Keep coding! :) :dizzy:

Diane Donahue
Diane Donahue
899 Points
Diane Donahue
Diane Donahue
899 Points

thank you just lost and confused on the second question now

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

The two media queries you have are for both questions. The first media query answers the first question, and the second one is for task 2. I assumed by the CSS you had that you were already passed task one and on task 2 as you have the CSS for it?

Diane Donahue
Diane Donahue
899 Points
Diane Donahue
Diane Donahue
899 Points

I passed one but on question 2 it still says it is wrong thank you

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

I put both in and both passed for me.

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

@media screen and ( min-width: 660px ) {
  h2 {
     font-size: 1.75em;
  }
}