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

I am sure I did it correctly. It just keeps telling me wrong

Task 2: h2 change to 1.75em

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.0em;
  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){
  body {
    font-size: 2.5em;
  }
}

@media screen and (min-width: 660px) {

h2 { font-size: 1.75em; }

}

2 Answers

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

I think the problem here is that the first media query is targeting the wrong element. It should be targeting the h1 and not the body.

Well I have already changed them to h1 in first and h2 in the second breakpoint, but It tells the same thing again

Please don't make another question on the same code challenge... Just be patient and wait for a reply.

just sorted it, thanks all your comments!

I just tried challenge and next code works for me:

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

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

just sorted it, thanks for your comments