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 trialLuc Nord
2,304 PointsChallenge Task (Refactor the layout)
I'm trying to pass the first challenge of "Refactor the layout" topic. The challenge asks me to add a width of 28.333% to the gallery list items inside the media query. So I'm adding the code:
@media screen and (min-width: 480px) {
#gallery li { width: 28.3333%; }
}
When I run the code, it gives an error. I've tried many different variants I don't see the problem with the code I wrote yet I can't pass the challenge.
Any ideas on how to beat this?
Thanks
7 Answers
Saul Guardado
Courses Plus Student 492 Pointsa {
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;
}
@media screen and (min-width: 480px) {
#gallery li{width: 28.3333%;}
}
```
Try to copy the entire code and replace
Saul Guardado
Courses Plus Student 492 PointsI wrote the same and don't have problem @media screen and (min-width: 480px) { #gallery li{width: 28.3333%;} }
Luc Nord
2,304 PointsThat's very strange. I just copied the code from your answer and still the same problem.
"Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."
Luc Nord
2,304 PointsIt worked when I copied it the whole code! I was writing the media query to the beginning of the CSS- do you think that was the reason? Or it was a bug with the challenge system? Thanks!!
Saul Guardado
Courses Plus Student 492 Pointsyou should respect the order of the code that they provide
nnuxiragwh
10,345 PointsThere is an empty media query rule specified at the end of the css file. Maybe you had written the same rule for the second time at the start of the file, at least that's what I had done :-D
jose martinez
1,671 Pointsi had the same problem and the reason is because i started writting on the top of the css, but the document already provide you with a media query at the bottom, so you either delete that one or just that one