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 trialGurkan Oluc
734 PointsWhat's the problem ?
@media screen and(max-width:480px) {h1{font-size:2.5em; }}
a {
text-decoration: none;
}
@media screen and(max-width:480px){
h1{
font-size:2.5em;
}
#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
Roy Penrod
19,810 PointsThe code challenge is asking you to create a breakpoint for devices 480 pixels wide or larger. Your media query is creating a breakpoint for devices with a max-width of 480 pixels.
Change your max-width to min-width so that your breakpoint looks like this:
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
Also, make sure you put the media query CSS code at the bottom of the CSS file.
I verified that my code passed the challenge.
Gurkan Oluc
734 PointsMe too but You write wrong says the program
Roy Penrod
19,810 PointsNot sure what's going on, but the code works. I just copied it directly from above and pasted it below the other CSS code of the challenge and it passed.
Kristopher Van Sant
Courses Plus Student 18,830 PointsIn addition to what Roy said, your code is also missing a closing bracket for the media query. You also want this media query to be at the end of the provided code. This is because CSS is read top to bottom and since there is already a font-size declared for the h1, you want the media query to come after it so that it can change the h1 to a new font-size depending on the breakpoints in the media query.
Here's a link to Stack Overflow post regarding where to place media queries. Hope it helps clear things up :) http://stackoverflow.com/questions/24456981/why-do-i-have-to-put-media-queries-at-the-bottom-of-the-stylesheet