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 trialchannonhall
12,247 PointsCode Challenge on working {SOLVED}
{SOLVED}
Sam Baines
4,315 PointsChannon did you get this challenge passed yet? If not just write out the code exactly as I have in my below answer to pass the challenge - I think maybe the copying and pasting is affecting the challenge.
channonhall
12,247 PointsThanks sam I tried everything but it still did not work..i think that its a website problem.
4 Answers
Nick Pettit
Treehouse TeacherHi Channon,
The code that Sam posted is correct. Workspaces and Code Challenges often have different requirements to help test your knowledge, so pasting code from your Workspace will rarely work. Be sure to read the instructions that the Code Challenge presents.
In this particular challenge, it asks you to modify a media query inside the included CSS file. If you scroll down to the bottom of the file, you'll find a media query has already been created for you. Inside of that media query is where you need to type your code.
Also, in your previous entry, I noticed you posted this code:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
However, that won't actually work, because you're missing the closing curly brace on the media query. Notice how the media query has an opening curly brace, and the "#gallery li" selector also has an opening curly brace, but there's only one closing curly brace at the end.
If it's still not working, please post the entirety of your entry here for others to try and debug. Thanks for being patient!
Sam Baines
4,315 PointsAwesome I get acknowledgement from the man himself! This one of the reasons I love treehouse!
Sam Baines
4,315 PointsHi Channon - if you are talking about the code challenge for the 'Refactor the layout', then you need to add the following code inside the media query for on the css file, like below:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n){
clear: left;
}
}
I just passed the challenge with this code so it definitely works. Hope this helps.
channonhall
12,247 PointsThanks Sam. I tried that code but it did not work i copied and pasted it but still did not work. it might be something else.
Any suggestions?
Thanks Sam again
Sam Baines
4,315 PointsHi Channon - well that is the exact code needed to pass the challenge, maybe posted your own code that is not passing and let us have a look.
channonhall
12,247 PointsThanks Sam and Nick
because of your help i have passed the challenge
Thanks again Sam and nick
chelseatobin
Front End Web Development Techdegree Student 1,029 PointsHere's a comment just in case anyone else has the same issue of the code challenge not accepting their code when it "looks" to be exact.
My code looked like this in the second portion:
@media screen and (min-width:480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child (4n) {
clear: left;
}
}
Looked great to me. Except I kept getting the "bummer" message. I came to the forum to see if anyone else had this issue, and just by comparing the code from Sam's comment, he had no space between child and (4n). So, upon changing my code and eliminating that single space:
@media screen and (min-width:480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}
the code challenge accepted it and I passed! :) (I don't know if spacing is always an issue or if it truly was THE issue in my situation, but it did fix my problem!)
channonhall
12,247 PointsThanks for helping other people :)
channonhall
12,247 PointsOh and can you help with this? https://teamtreehouse.com/forum/i-dont-know-where-the-vids-are
channonhall
12,247 Pointschannonhall
12,247 PointsSo here is my code from workspaces that I copied and pasted into the code challenge
@media screen and (min-width: 480px) {
/********************************** TWO COLUMN LAYOUT ***********************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/********************************** PAGE: PORTFOLIO ***********************************/
#gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { clear: left; }
/********************************** PAGE: ABOUT ***********************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
the workspace one did not work so i followed the in structions
@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }