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 trial

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by channonhall
channonhall
12,247 Points

Code Challenge on working {SOLVED}

{SOLVED}

channonhall
channonhall
12,247 Points

So 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) {

/******************
header
*********************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo {
float: left;
margin-left: 5%;
text-align: left;
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%; }

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Channon 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
channonhall
12,247 Points

Thanks sam I tried everything but it still did not work..i think that its a website problem.

4 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi 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
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Awesome I get acknowledgement from the man himself! This one of the reasons I love treehouse!

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi 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
channonhall
12,247 Points

Thanks 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
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi 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
channonhall
12,247 Points
channonhall
channonhall
12,247 Points

Thanks Sam and Nick

because of your help i have passed the challenge

Thanks again Sam and nick

chelseatobin
seal-mask
.a{fill-rule:evenodd;}techdegree
chelseatobin
Front End Web Development Techdegree Student 1,029 Points
chelseatobin
.a{fill-rule:evenodd;}techdegree
chelseatobin
Front End Web Development Techdegree Student 1,029 Points

Here'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
channonhall
12,247 Points

Thanks for helping other people :)

channonhall
channonhall
12,247 Points

Oh and can you help with this? https://teamtreehouse.com/forum/i-dont-know-where-the-vids-are