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

Ryan Schmelter
Ryan Schmelter
9,710 Points
Posted by Ryan Schmelter
Ryan Schmelter
9,710 Points

Question about using nth-child

Hoping someone can clear this up. The third item in my gallery was getting pushed away by the first one on top at narrow sizes because of the caption wrap. To fix this, I used the following code:

@media screen and (max-width: 479px) { #gallery li:nth-child(3n) { clear: left; } #gallery li:nth-child(5n) { clear: left; }

When placed above the other media queries (min-width 480px) and (mix width 660px) it actually made all of the images in the gallery larger. What's more it messed with the formatting of the Contact and About Us pages. When placed below the other two media queries, it actually resolved my original issue.

Can anyone help me understand why this would happen?

Kathryn Notson
Kathryn Notson
25,941 Points

Ryan Schmelter:

You didn't use "#gallery li:nth-child(4n) as the instructor stated in the video. He didn't instruct you to use the "li:nth-child(3)" or "li:nth-child(5). The problem exists between the 3rd & 4th image, so you want everything BEFORE the 4th image to "clear: left."

Review the video for this lesson to see where the instructor placed the media queries in the "main.css" file. Order does matter. There isn't any "mix-width." Spelling correctly is required in coding. Otherwise, you get unexpected behavior.

When you resize the browser window, you're just dragging one of the vertical edges of the viewport closer to the other one so you can see what the results may look like in an iPhone.