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 trialFrancesco Vitale
4,962 Pointswhy is the code not working ? :@media screen and (min-width: 480px;) { h1 {font-size: 2.5em;}}
Why is the code don't working? Can anyone give me help with that? thank you
@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;
}
3 Answers
Steven Parker
231,198 PointsYou should always place media queries at the end of the CSS.
That way they can take precedence over other rules of equal specificity when they apply. In this case, there's already a rule in the file for h1
that will override the media query otherwise.
You also have a syntax error caused by a stray semicolon in the first line.
james south
Front End Web Development Techdegree Graduate 33,271 Pointsremove the semicolon after 480px in the media query.
Mike Wagner
23,559 Points+1 for catching the semi-colon. Even though that wasn't the entirety of the problem, I missed it at first glance.
Francesco Vitale
4,962 PointsThank you James ,it was part of the problem and you helped me figure out it!
Mike Wagner
23,559 PointsIf you're referring to the media query at the top, then moving it to the bottom should function the way you expect. Since it is a cascading style sheet, the h1 values lower in the sheet are overriding your media query changes.
Francesco Vitale
4,962 Pointsthank you mwagner , it was helpful!