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 trialAdam Kmet
1,039 Points@media screen and (min-width:480px) { h1 { font-size:2.5em; } } whats wrong with this code please?
why cant i set font style to 2.5em?
@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
Fraser Edwards
6,307 PointsYou have a rule setting the h1 font-size to 1.75em further down in your style sheet. Because CSS prioritises rules further down the style sheet, your media query is being cancelled out by this rule. If you move your media query to the bottom of the sheet it should work.
Adam Kmet
1,039 PointsThank you very much it worked :)
Larry Coonrod
5,041 PointsYou have to remember the cascading nature style sheets..i.e. a declaration will override a previous declaration with the same selector. In this case, if you look the CSS styles, you'll see an h1 with a font-size of 1.75em after media query. Think about where you want your media query to avoid this problem so the h1 font-size:2.5em only occurs with a min-width screen size of 480 pixels.
Adam Kmet
1,039 Pointsthank you
Christopher Cifonie
4,705 PointsChristopher Cifonie
4,705 PointsMake sure you media query comes at the end of your css.
Also for h1's font family make sure you put quotes around a font name that has a space in it like this
font-family: "Changa One", sans-serif;