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 trialRasmus Sjørslev
3,696 Pointsmedia query does not seem to work in the challenge task
i am using the following in the media query challenge:
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
but it does not validate it?
@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;
}
1 Answer
Tobias Helmrich
31,602 PointsHey Rasmus,
you did a good job! The only thing you did wrong is putting the media query in the beginning. You have to put the media query in the end and it should work! :)
The reason why you have to do this is because of the cascading nature of CSS your media query will be overwritten later. In particular the media query you're writing now will be overwritten by this part as the font-size will be set to 1.75em instead of your specified 2.5em:
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
So like I said, just put your media query in the end and everything should work! If you have further questions feel free to ask, good luck! :)
Rasmus Sjørslev
3,696 PointsRasmus Sjørslev
3,696 PointsHi Tobias,
Thank you for the answer - that did the job :) i can see other people have asked the same questions but i missed that in the forum.
thanks!