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 trialBrice Schultz
3,966 PointsCreate a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
I don't understand what I'm doing wrong, my code.
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
a {
text-decoration: none;
}
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
#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;
}
Brice Schultz
3,966 Points@ Cristian Castro Thank you so much that worked. In the video the example was shown in a separate blank .css file so I must not have caught it if they mentioned that.
1 Answer
Steven Parker
231,210 PointsYou should be aware of the REASON the placement makes a difference. The CSS file already contains a rule for h1 that includes the font-size property. And in CSS, when rules have equal specificity (like these), the latter one overrides any conflicting properties with those before it. So when you put your media query at the top of the file, the other h1 rule below it took precedence.
Now since the purpose of media queries is to change the properties on the devices they apply to, it only makes sense that they should be at the bottom of the file, or perhaps in a separate CSS file that is included after any others.
Cristian Castro
Courses Plus Student 12,666 PointsCristian Castro
Courses Plus Student 12,666 PointsBreakpoints should always go at the end of the document. Hope that helps.