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 Sherry Parker
Sherry Parker
3,020 Points

can't figure this out! create a breakpoint for devices 480px wide set h1 font-size to 2.5em.

I am having a hard time with seeing what I have done incorrectly in this process. I keep getting it wrong and getting this answer. Did you change the h1 to 2.5em

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

<link rel="stylesheet" href="css/responsive.css">

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

}
Cheo R
Cheo R
37,150 Points

Hello Sherry, you're on the right track, try adding screen and to your media statement and moving the whole thing to the top line, so it'll look like"

@media screen and (min-width 480px){
  h1{
    font-size:2.5em;
  }
}
Sherry Parker
Sherry Parker
3,020 Points

ok, I tried putting it right after this: contact-info a { still wrong. put it at very top of code right below text-decorations: none; still wrong.

help!!!

2 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

You are missing a colon : between min-width and 480.

@media screen and (min-width: 480px) {
  /* Your code here */
}
Sherry Parker
Sherry Parker
3,020 Points

Thank you all for your help but it is still saying it is wrong. I put in the colon and put it at the bottom of the code I dont know what else to do!

This is the last part of the code, it is still not right, saying , all the other code above is the same? what do I do??

Bummer! Did you change the h1 font-size to 2.5em for devices larger than 480px?

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

Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

I noticed two problems in the new code:

  • You need a space between and and (min-width: 480px)
  • You need to add the closing } for the media query

should be:

@media screen and (min-width: 480px) { 
  h1 { 
    font-size: 2.5em; 
  }
}
Sherry Parker
Sherry Parker
3,020 Points
Sherry Parker
Sherry Parker
3,020 Points

Thank you all, I finally got it!!! I had to place the code in under the h1 h2 section.