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
Richard Schiller
9,238 PointsCan anyone tell me why it says I have added this second 660px breakpoint incorrectly?
I thought I used the same syntax as the 440px breakpoint but it returned an error. HELP???
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; }
3 Answers
Jennifer Nordell
Treehouse TeacherHi there! It's not so much that the 660 media query is wrong, it's that the media query above it was never properly closed. You opened that media query, added an h1 rule, but then never closed it with a closing curly brace. You also did the same thing in your 660 media query. When I type out my curly braces I never type an opening curly brace without immediately typing a closing curly brace. Then I type out what's supposed to belong inside in that place. This helps diminish the risk of forgetting to close it later.
Essentially, both of your media queries are missing a closed curly brace at the end.
Hope this helps!
Richard Schiller
9,238 PointsJennifer, Thanks very much for the answer. I added the curly braces at the end of each but it didn't approve those changes. Where am I supposed to add them? Rich
Richard Schiller
9,238 PointsThis is it with your suggested changes:
@media screen and ( min-width: 480px ) {
h1 { font-size: 2.5em; } }
@media screen and ( min-width: 660px ) {
h2 { font-size: 1.75cm; } }
Jennifer Nordell
Treehouse TeacherYou corrected the closing curly braces, but you have now introduced a typo. In your original code, the h2 is set to 1.75em. But in your altered code, it's now set to 1.75cm. Note the difference between em and cm.
Hope this helps!
Richard Schiller
9,238 PointsJennifer, you are my hero! I have been studying this piece of code for hours and was ready to throw in the towel. You rescued me. Thanks very much, I really appreciate it. Rich