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 trialAshkan Entezari
3,956 PointsWhat's wrong with my code?
Question asks me to write a breakpoint for devices larger than 480 px and set the h1 font-size to 2.5em. Here's my solution which is not working! Can you help me?
@media screen and (min-width: 480px) { h1 { font-size: 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
Codin - Codesmite
8,600 PointsYour Media Query is correct, but if you look down the rest of the css file you still have:
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
This is overiding your media query as it comes after, and styles sheets are cascading so the last declared value for font-size on h1 will be the font-size used.
Remove font-size: 1.75em; from the the h1 styles and your code will be accepted :)
h1 {
font-family: Changa One, sans-serif;
font-weight: normal;
}
Or alternatively move the media query after the h1 styles so the media query overides the styles set to h1.
Jason Anders
Treehouse Moderator 145,860 PointsHi Ashkan,
Your code is correct, except that it needs to be at the bottom of the CSS file, not the top. Just move your code to the end and you'll be good to go.
Keep Coding! :)
Ashkan Entezari
3,956 PointsThank you so much!
Is it because if I do so, it would just do the media query and ignore the rest?
Jason Anders
Treehouse Moderator 145,860 PointsCorrect. Remember the "C" in CSS stands for "Cascading."
So, in this example, you are setting the font-size for the h1 to 2.5em on screens larger that 480px, but a little further down, the h1 is set to 1.75em, so now for that screen size, the 2.5em is overwritten with the 1.75em.
:)
Dennis Marquez
Courses Plus Student 2,791 PointsHave the same problem. Even if I move the code down, or remove the other H1 font-size, it still says i's not correct. Getting really annoyed here as I want to move on. It works fine in my workspace. There's nothing wrong with my code, or the location of it.
Ashkan Entezari
3,956 PointsLook at my code above, if you place it at the bottom it works fine! Look what you're doing wrong and don't give up! It can be as simple as missing a semicolon or misspelling a word.
Ashkan Entezari
3,956 PointsAshkan Entezari
3,956 PointsThank you so much for your help!