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 trialpaul 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 Graduate 24,118 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 Graduate 24,118 PointsJosué Rodriguez
Front End Web Development Techdegree Graduate 24,118 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.