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 trialBruce Hendrickson
1,654 Pointsmedia 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?
@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
15,244 PointsHello, 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
rdaniels
27,258 Pointstry 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
Treehouse Moderator 145,860 PointsHi 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
Treehouse Moderator 145,860 PointsHi 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
19,209 PointsI didn't see your answer until after I posted mine haha!
Zach Patrick
19,209 PointsMake sure you are putting your media queries at the bottom of the stylesheet, so the browser reads that after all your other styling.
robertvandeweghe
8,120 Pointsso you need to add additional braces
@media screen and (min-width:660px){ body{ background:darkgreen; } }
Jason Anders
Treehouse Moderator 145,860 PointsJason Anders
Treehouse Moderator 145,860 PointsHi 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 specifyscreen
for clarity, as opposed toprint
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
15,244 Pointssizwengubane
15,244 PointsSure bro, Thanks for the advice :)
Richard Thomas
3,029 PointsRichard Thomas
3,029 PointsThanks for your help, I almost did it without looking, just forgot a space and px. Upvoted