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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

What 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

Hi 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?

https://w.trhou.se/p42lr5m3t5

5 Answers

Steven Parker
Steven Parker
231,198 Points

Did 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.

Thanks for your help BTW Steven. I appreciate it.

Hi 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>

Kellen 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.

Kathryn,

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.

Most recent snapshot of code on 08.26.2016

https://w.trhou.se/6iwp19i9h1

Kellen 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Kevin Lawler
Full Stack JavaScript Techdegree Student 5,929 Points

Did 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!