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 trialKara Marotta
2,799 PointsWhy will this not work? @media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
I tried the code @media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
this should work. it will not
@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;
}
Sandro Hallado
4,231 Pointscan you display your html as well please
2 Answers
Jason Anders
Treehouse Moderator 145,860 PointsTo provide an explanation as to "why" ...
Media queries need to be placed at the bottom of the CSS sheet, so not to be overwritten by rules further down the sheet. Remember the "C" => "Cascading"
Using this as an example, with the Media Query at the top, the h1 font-size is being set to 2.5em. But, if you scroll down the sheet, there is another rule for the h1 that is setting the font-size to 1.75em. So, now the Media Query is unless, as it's rule is being overwritten by this one.
To prevent this from happening and having your responsive design break, it is a very good practice to always have the Media Queries at the end of the file.
Hope that helps to make sense for you!
Keep Coding! :)
Kara Marotta
2,799 PointsThank you! moving it to the bottom worked perfectly!
Cheo R
37,150 PointsCheo R
37,150 PointsTry moving your media queries to the bottom.