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

After the first breakpoint, create a second breakpoint for devices 660 pixels wide or larger. Inside the breakpoint, set

I am stupid and cant figure this out ): HELP?

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;


    }

}
maali2
maali2
12,539 Points

code looks fine.

16 Answers

Micael Francisco
Micael Francisco
2,419 Points

Because of the cascading nature of css ,you need to add the 660 media query before the 480 media query, I'm just a beginner but I think that's the solution to the problem, worked for me.

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

add colon after min-width

min-width: 660px

donald kaiser
donald kaiser
9,736 Points

I'm doing the exact code above and it keeps telling me "Did you change the h2 font-size to 1.75em for devices larger than 660px?

Here's my code:
@media screen and ( min-width 660px ) {

h2 { font-size:1.75em; }

}

Micael Francisco
Micael Francisco
2,419 Points

Hi, pay attention to your code writing , read it very carefully.

@media screen and ( min-width: /* Forgot to add the " : " without quotes.*/ 660px ) {

h2 {

 font-size: 1.75em; }

}

I thought so too but it doesnt work i get errors

omg duh xD

Mahdi Hamdi
Mahdi Hamdi
5,802 Points

Check the bracket.

donald kaiser
donald kaiser
9,736 Points

I'm doing the exact code above and it keeps telling me "Did you change the h2 font-size to 1.75em for devices larger than 660px?

Here's my code:
@media screen and ( min-width 660px ) {

h2 { font-size:1.75em; }

}

you have to make another @media tag

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Same here, this code doesn't work:

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

How should I solve this?

Thanks.

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

h2 { font-size:1.75em; }

}

mwangi gitau
mwangi gitau
9,894 Points

make sure there is a space between the word "and" the first bracket.

Patricia Gallego
Patricia Gallego
781 Points

Has someone the answer? I am writing the same structure as in task 1 and is not working.

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

h1 { font-size: 2.5em;}

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

h2 { font-size: 1.75em;}

Bima Ardi
PLUS
Bima Ardi
Courses Plus Student 2,173 Points

I also got the same Oh no, bummer thing... until I change the code like this :

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

h2 { font-size: 1.75em;}

}

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

h1 { font-size: 2.5em;}

I know.. it is so weird........

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

Stuck on it! still got error : Bummer! Did you change the h2 font-size to 1.75em for devices larger than 660px?

} }

  • this was the reason. Solved

dzfnjhgjnbfdhyytegyjgbhyj