3 column fixed with nth-child, now 2 columns are buggy

Question

After following the instructions to use the nth-child pseudoclass, the 3 column-gallery lines up perfectly! However, now, if I resize the window and get to the smallest screen, the 2 column gallery is messed up. There are three rows and the first item in the second row is missing (=it pushed everything to the right by one.) I wonder why this is happening and how could I fix it? I have looked in the previous answers but could not find a definitive answer. Thank you in advance!

Answer 1 · 2016-09-23T15:51:03Z

September 23, 2016 3:51pm

Anna Gardener ,

Thanks for your persistence (which is so needed in this field, where you often crash walls and get stuck!), and don't worry, I am also a beginner. Indeed, I started here this month, in September, hoping I could understand at least the basics, and the truth is I've found it extremely helpful and engaging. I'm already (in little time) learning more than I expected :)

Now, down to our business, regarding your code, I'd like to share a remark and a question.

The remark is: when you want to post code in the forum, it's easier for everyone to read it and for someone to help you if you write it like this:

Write 3 "```" (without the quotation marks) in a blank line. You should find that symbol in your keyboard under "Esc" and on top of "Tab" (provided that you have the English keyboard installed in your Operative System).
Next to it, write "html", "css" (always without quotation marks) or whatever language it may correspond, in our case you'll need either of those for your code.
Press Enter, thus going to the next line, and once there, start typing or pasting your code.
Once finished, press Enter again, to go to the next (blank) line. Again, type 3 "```".
Before posting, if you want you can press the eye button at the bottom right of the box where you're writing your comment, it will allow you to preview how your message will look like once sent, and then you can press the same button (now looks like a pencil) to come back to edition mode.

The question: I noticed that in the fourth image of your <ul>, that is, the one that should be the first image of the second row (thus the one that's giving you trouble), you made an anchor to "img/capricco,jpg", but the image you called subsequently is "img/01.jpg" instead. Like this:

<a href="img/capricco.jpg"> <img src="img/01.jpg" alt="websites">

Was that intentional, for some reason like that you wanted one image to link to another one? Or maybe you changed images names and one was left unchanged?

Just one more thing, that I remembered now, as I type: what I was saying about 3 +1 and the Teacher's Notes is this. In your responsive.css, you have:

#gallery li:nth-child(4n) {
    clear:both;
}

However, what Nick suggested (and I learned from him) is that instead of 4n, which is the fourth element and then the eighth element (thus the second in the third row, not the first or last one on any row), etc., we may use "3n + 1" (that is: you have three columns, so the next one after the third will always be cleared from the left).

So, in your case, this is how that applies:

#gallery li:nth-child(3n + 1) {
    clear: left;                              /* believe me, in this case, making it left will be better, you don't want to clear:right :) */
}

Last but not least. The Teacher's Notes sometimes have very important notes or relevant links, you do well in reviewing those of videos you already watched. You might have missed something important! I was going to attach a screenshot, but my connection is not really good here and it was impossible to load it. However, when you're watching a video, you'll find the Teacher's Notes under the video, at the very left. Click on it (if it's not already selected) and you can read it.

NOTE: Not every video has Teacher's Notes.

Let me know your thoughts!

Answer 2 · 2016-09-22T01:42:02Z

September 22, 2016 1:42am

What James is trying to say is that you need a second media query defining a breakpoint for your 3 column layout. For example

css
@media and screen (min-width:740px) {
 #gallery li {
width: 28.333%;
}
#gallery li nth-child(4) {
clear: both;
}
}

Answer 3 · 2016-09-22T12:10:17Z

September 22, 2016 12:10pm

Hi Anna Gardener ,

First of all, I guess if you have no problem with the three column layout, and your problem is with the smallest screen (if it's possible to resize it, I assume it's a computer screen), then your media query specified for screen 480px or larger should be fine for now. Good to go there.

I was going to comment to you about the :nth-child(4) that it would be advisable to follow the suggestion in Teacher's Notes and make it :nth'child(3n + 1), plus I was going to suggest that you only clear:left instead of both, in case this might disrupt the format at the right of your 3n + 1 image.

However, I tried your code and it worked for me, plus I thought if this media queries are for 480px or larger and your problem is when it's smaller, the problem may not really lie in those media queries, but either in the index.html or the main.css (or the name you may have used for your main css file).

So my first question is: how many images ( <li> ) do you have there? Five like in the example?

And my second question is, may it be possible to see your index.html and your main.css (or corresponding file name)?

Thank you!

Answer 4 · 2016-09-22T16:32:54Z

September 22, 2016 4:32pm

Hi Anna,

A student asked a similar question a few days ago.

https://teamtreehouse.com/community/responsive-design-of-image-gallery-and-the-use-of-nthchild

See if that helps you out. The class name is different but it's overall the same problem.

As Nico mentioned, you do want to change your nth-child expression to 3n + 1 for the 3 column layout.

Answer 5 · 2016-09-23T08:30:41Z

September 23, 2016 8:30am

Hi everyone, thank you for trying to help me!

I am not sure how to attach my code, so I guess I'll just copy it here. I have 5 images and followed the video withe very step.

I used clear: both as an attempt to fix the problem, previously it was "left".

I am quite new here, didn't know there was such a thing as "teacher's notes :) I tried the 3+1 though, based on other's comments.

So, with all that, I'l just comment my code below.

Welcome to the Treehouse Community

Looking to learn something new?

Anna Gardener

Anna Gardener

3 column fixed with nth-child, now 2 columns are buggy

Anna Gardener

Anna Gardener

Aurelian Spodarec

Aurelian Spodarec

5 Answers

nico dev

nico dev

Anna Gardener

Anna Gardener

Hanxiao Jiang

Hanxiao Jiang

Graham Tonelli

Graham Tonelli

Aurelian Spodarec

Aurelian Spodarec

nico dev

nico dev

Jason Anello

Jason Anello

Anna Gardener

Anna Gardener

Anna Gardener

Anna Gardener

Anna Gardener

Anna Gardener

Anna Gardener

Anna Gardener

wrapper {

logo {

gallery {

gallery li {

gallery li a p {