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 Connor Baker
Connor Baker
586 Points

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
maali2
maali2
12,539 Points

code looks fine.

16 Answers

Micael Francisco
Micael Francisco
2,419 Points
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.

Angel Fneich
seal-mask
.a{fill-rule:evenodd;}techdegree
Angel Fneich
Front End Web Development Techdegree Student 2,571 Points
Angel Fneich
.a{fill-rule:evenodd;}techdegree
Angel Fneich
Front End Web Development Techdegree Student 2,571 Points 
@media (min-width: 480px){
  h1 {
    font-size: 2.5em;
  }
}
@media (min-width: 660px) {
  h2 {
    font-size: 1.75em;
  }
}
Ben Ragsdale
Ben Ragsdale
14,187 Points
Ben Ragsdale
Ben Ragsdale
14,187 Points

add colon after min-width

min-width: 660px

donald kaiser
donald kaiser
9,736 Points
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
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; }

}

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

I thought so too but it doesnt work i get errors

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

omg duh xD

Mahdi Hamdi
Mahdi Hamdi
5,802 Points
Mahdi Hamdi
Mahdi Hamdi
5,802 Points

Check the bracket.

donald kaiser
donald kaiser
9,736 Points
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; }

}

Briggs Tomlinson
Briggs Tomlinson
1,016 Points
Briggs Tomlinson
Briggs Tomlinson
1,016 Points

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
Learning coding
.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.

Nishita Parikh
Nishita Parikh
907 Points
Nishita Parikh
Nishita Parikh
907 Points

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

h2 { font-size:1.75em; }

}

mwangi gitau
mwangi gitau
9,894 Points
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
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
Bima Ardi
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........

Volodymyr Rusynyk
Volodymyr Rusynyk
5,725 Points
Volodymyr Rusynyk
Volodymyr Rusynyk
5,725 Points

@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?

Volodymyr Rusynyk
Volodymyr Rusynyk
5,725 Points

} }

  • this was the reason. Solved
Andrew Fox
Andrew Fox
2,730 Points
Andrew Fox
Andrew Fox
2,730 Points

dzfnjhgjnbfdhyytegyjgbhyj