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 trialTroy Fletcher
2,814 PointsCreate a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
Not letting me get it right
@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;
}
4 Answers
Matt S
1,497 PointsTroy,
Your curly braces are causing the issue. Remove the one at the top that is under media, and add another curly brace at the very bottom, under the closing curly brace closing your .contact-info selector.
Shawn Ramsey
27,237 PointsYou should declare your media queries at the bottom of your stylesheet.
Mark Pryce
8,804 PointsShawn is right, keep in mind what 'cascading' means anything declared at the top of your CSS will be overwritten if the element is called further down your document.
Your second declaration of h1 font-size is taking priority because it's further down your stylesheet.
It's good practice to put media queries at the bottom (or in a separate document .. but you will learn that.)
Happy coding.
Unsubscribed User
Courses Plus Student 7,294 PointsIs only the h1 supposed to be in the 480 pixels and larger media query? or is all of the posted CSS supposed to be in this media query?
Someone just posted a question very similar to this.
If you move the curly bracket to the bottom, you will have two h1 class selectors. The second one would be making the h1 1.75 em.
Matt S
1,497 PointsAll of the CSS is supposed to be in the media query. This is a challenge, so the code is already there. I was referring the braces after the initial media query.
Troy Fletcher
2,814 PointsGreat, got it. You guys are the best, thank you!
Shawn Ramsey
27,237 PointsShawn Ramsey
27,237 PointsMatt has the correct answer since you later mentioned that all of the CSS is supposed to be in the media query in this particular task.