Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

paul clear
2,704 PointsHaving an issue with media query that seems to be correct but isn't...
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
Says to create a breakpoint for width larger than 480 pixels that sets h1 to font-size of 2.5 em... halp!
@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;
}
2 Answers

Josué Rodriguez
Front End Web Development Techdegree Student 17,924 PointsHi
Media Queries should come last in your CSS. Thus in this challenge you need to place it all the way at the bottom.

Anthony Scott
Courses Plus Student 9,001 Pointswhat's worse is that the error message we get has nothing to do with the actual issue
paul clear
2,704 Pointspaul clear
2,704 PointsJosue Rodriguez once again, this is never mentioned in the entire 8 minute video lesson nor in the requirements of the challenge. did you run into anything of this sort? it's a bit annoying to have to deal with omitted issues or those taught "incorrectly" versus just not absorbing information or being ignorant to lessons. regardless, thank you again for your help & effort.
Josué Rodriguez
Front End Web Development Techdegree Student 17,924 PointsJosué Rodriguez
Front End Web Development Techdegree Student 17,924 PointsAt 50sec he creates a new file called responsive.css and links it in the index.html after main.css In previous lessons I believe he covers how the cascade works. So for example if you have an h1 near the top of the CSS file but later on towards the bottom you add another h1 then that last one will overwrite the first one. So by adding the responsive.css after the main.css in the index document all responsive.css rules will come after. In the challenge you only have one document to work with so you add it at the end.
Yeah it's not covered exactly but based on the way things work I think it probably assumes you might figure it out I suppose.