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
Kellen James
Front End Web Development Techdegree Student 1,934 PointsWhat nth-child to use when 4th and 5th element (picture) are pushed too far down on the 2nd row of 3 column layout?
I have successfully broken out my personal profile page into a three column layout. I have a total of 6 images. The first three line up perfectly on the first row (1,2,3). On the second row the 4th and 5th image are being pushed really far down below everything else and then the 6th (last image) lines up correctly. Any ideas? Thanks so much
Kellen James
Front End Web Development Techdegree Student 1,934 PointsHi Kathryn,
Thanks for the advice. I'm actually having trouble with the code on my personal portfolio page. Do you think you could review my below link when you get a chance?
5 Answers
Steven Parker
231,248 PointsDid you see the code correction in the teachers' notes?
The video shows the code as ":nth-child(4n)" but it should be ":nth-child(3n+1)".
If that's not your issue, try posting your code.
Or even better, make a snapshot of your workspace and post the link to it.
Kellen James
Front End Web Development Techdegree Student 1,934 Points
Kellen James
Front End Web Development Techdegree Student 1,934 PointsThanks for your help BTW Steven. I appreciate it.
Jason Anello
Courses Plus Student 94,610 PointsHi Kellen,
In addition to the nth-child expression mentioned by Steven and Kathryn, you have an issue with your html.
You've placed each li in its own ul. You should only have a single gallery ul with all the li's in it.
Something more like this:
<ul id="gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Kathryn Notson
25,941 PointsKellen James:
Did you look at Line 26 in your responsive.css file? It still shows ":nth-child(4n)" instead of ':nth-child (3n+1)". See what that does first. If that doesn't resolve the issue let us know.
You could alter your <title> like this: <title>Kellen James | Designer</title>. The vertical "pipe" between your name & "Designer" is underneath your backspace key on your keyboard on the right hand side. Be careful using an apostrophe. Browsers interpret them as single quote marks. Avoid them if possible. You'll learn later that if you use an apostrophe inside an HTML tag that you will need to use double quotes around your sentence to make sure the browser interprets your apostrophe as an apostrophe & not as a single quote mark.
Line 28 & 29 you have a <ul> with a class that doesn't have anything inside it. There doesn't seem to be a purpose for the class.
Your <a href> & <img src> tags should show: "img/name of image.jpg". You don't need to spell out the word "image."
Look at line 110 in your index.html. Use <p>& copy; 2016, Kellen James</p> instead of "class=copyright." You also have your class included inside the first <p> tag & that is incorrect.
Look at your main.css file. Your padding & margins are not even. Think carefully which sides of your elements you are affecting - one side, two sides, or four sides. Remember, padding is inside your box model & margins are outside your box model.
You don't need more than one blank line between code sections, so you can eliminate those. (Browsers ignore blank lines & spaces anyway, but it helps to make your code neater & tidier.) Align beginning & end HTML element tags vertically so you can easily see you have closed your tags properly, such as your <ul></ul> & <li></li> tags.
Kellen James
Front End Web Development Techdegree Student 1,934 PointsKathryn,
First of all I just want to thank you so much for the detailed response and I am very impressed by your knowledge as well as the other responders. This is like a whole new universe to me right now.
It seems that by updating the incorrect li elements in the .index file and changing the nth: child to (3n+1), I have resolved the spacing issues with the images. Just want to note that for some reason I have to type of the full word "image/nameofpic.jpg" otherwise the picture won't display. I tried img/nameofpic.jpg and it didn't work.
I am still a little confused on a few other things so bear with me...
On my .index file, it now seems that the ending HTML tag is being highlighted in red (indicating that it has not been opened somewhere). I thought line 2 is where the opening tag of the HTML begins?
I also have a question about the header and the spacing. I don't seem to understand how to apply the correct level of margin and or padding. I had a black header and it is now only showing on the about and contact pages (no longer the main index file). I will repost my code again and just want to thank you in advance for sharing your knowledge and your patience.
Kellen James
Front End Web Development Techdegree Student 1,934 PointsMost recent snapshot of code on 08.26.2016
Kathryn Notson
25,941 PointsKellen James:
I noticed in your index.html file you have 2 headers, 2 bodies, & <main></main>. It's not standard practice to have 2 headers, 2 bodies, & I don't think <main></main> is correct. I think you're supposed to have only 1 header, 1 body, & <main> doesn't have a closing tag. Here's a link about <header> tags: http://www.w3schools.com/tags/tag_header.asp. Here's a link about <body> tags: http://www.w3schools.com/tags/tag_body.asp. Here's a link on <main> tags: http://www.w3schools.com/tags/tag_main.asp.
Your <html></html> is correct.
Align your HTML element beginning & ending tags so they are vertically even with each other. They're much easier to read that way to see if they are paired correctly. You will need to adjust your indentation of your code to do this. Think of stair steps.
The CSS box model is content, padding, border, & margin from inside out. Look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model. This should help you out. Remember, everything is inside the box EXCEPT the margin.
Happy coding!
Kevin Lawler
Full Stack JavaScript Techdegree Student 5,929 PointsDid all the issues work out Kellen?
I'm finding that with coding, the "small stuff" always matters. "Good Enough" is NOT! Lol.
As I progress, I am quicker to find errors, and can ANTICIPATE where an error may be located.
It's all just a new skill to get familar with.
Do projects in sections and review what each part does. It's VERY hard to evaluate errors when EVERYTHING is done, and typed out, and you're looking for that little "needle" of code in the workspace of hay!
wishes for great success! Treehouse people are Great!
Kathryn Notson
25,941 PointsKathryn Notson
25,941 PointsKellen James:
Do this so others can see your code: https://teamtreehouse.com/community/new-forum-feature-available-attach-your-code-from-code-challenges