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

Bruce Hendrickson
Bruce Hendrickson
1,654 Points
Posted by Bruce Hendrickson
Bruce Hendrickson
1,654 Points

media query break point

This is the quiz question: Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

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

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

What am I doing wrong?

css/main.css 
@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }
}
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;
}

5 Answers

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Hello, this is the complete answer for all 2 steps of the challenge. You dont have to specift u are making a media query for screens, its automatically set by default.

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

Mark my answer as the best if i was able to help u

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Lakindu,

While screen is not needed, it is good that the new students first learn the long and formal way then learn the shortcuts, as there are many times when you will need to specify screen for clarity, as opposed to print for example.

Also, as one of the Forum Moderators, I would like to point out that it is kind of frowned upon in the forums to just "give away" the answer(s) without at least proper and detailed explanations as to why it is the answer. You pasted the correct code block, but failed to explain to Bruce that his code is absolutely correct, just in the wrong place in the style sheet. Without this, how would he be able to learn and further his advancement without coming across the same problem again (correct code but incorrect placement.)

Your participation in the forums is greatly appreciated, just take more care in explaining, rather than just giving the answer away.

Keep Coding! :)

sizwengubane
sizwengubane
15,244 Points

Sure bro, Thanks for the advice :)

Richard Thomas
Richard Thomas
3,029 Points
Richard Thomas
Richard Thomas
3,029 Points

Thanks for your help, I almost did it without looking, just forgot a space and px. Upvoted

rdaniels
rdaniels
27,258 Points
rdaniels
rdaniels
27,258 Points

try taking out the second curly brace after your h1, notice the other tags only have one opening and one closing. If that doesn't work change the h1 further down the page from 1.75em to the 2.5em... Hope this helps...

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Rodney,

The second curly brace is needed, because the styling is inside of a media query which has an opening curly brace. So, without the second curly brace, the opening one for the media query will not be closed. Bruce's code is correct, it is just place at the top of the style sheet instead of the bottom.

:)

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

Hi Bruce. Welcome to Treehouse.

Your answer is correct, it is just in the wrong place. In the challenges, unless you are specifically directed to do so, all your new code should go after all the pre-loaded coded. This is the only reason why you are getting the Bummer!.

Also, it is a good idea to have all your @media queries at the end of your CSS file anyways (because of the Cascading files).

Keep Coding!

Zach Patrick
Zach Patrick
19,209 Points
Zach Patrick
Zach Patrick
19,209 Points

I didn't see your answer until after I posted mine haha!

Zach Patrick
Zach Patrick
19,209 Points
Zach Patrick
Zach Patrick
19,209 Points

Make sure you are putting your media queries at the bottom of the stylesheet, so the browser reads that after all your other styling.

robertvandeweghe
robertvandeweghe
8,120 Points
robertvandeweghe
robertvandeweghe
8,120 Points

so you need to add additional braces

@media screen and (min-width:660px){ body{ background:darkgreen; } }