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

Matt Copeland
Matt Copeland
2,874 Points
Posted by Matt Copeland
Matt Copeland
2,874 Points

Having trouble with "nth-child(4n)" in Responsive Web Design Chapter...

Here is what I have for the CSS:

gallery li {

width: 28.3333%;

}

gallery li:nth-child(4n) {

clear: left;

}

When I look at the portfolio page, it's still getting all jumbled and not appearing neat and orderly.

Here is my HTML for that section:

<section> <ul id="gallery">

    <li><a href="img/sunsetformation.jpg"><image src="img/sunsetformation.jpg" alt=""></image>
    <p>Stearmans at sundown.</p></a></li>

    <li><a href="img/vegasenroute.jpg"><image src="img/vegasenroute.jpg" alt=""></image>
        <p>Beat the the traffic on the I-15 at 10,000 feet.</p></a></li>

    <li><a href="img/exampassed.jpg"><image src="img/exampassed.jpg" alt=""></image>
        <p>Add an instrument rating to become more proficient and safer.</p></a></li>

   <li><a href="img/selfportrait1.jpg"><image src="img/selfportrait1.jpg" alt=""></image>
         <p>Matt with a Cessna 172.</p></a></li>

   <li><a href="img/26.jpg"><image src="img/26.jpg" alt=""></image>
         <p>San Diego makes for a wonderful flight training environment.</p></a></li>

  </ul>
</section>

First time posting here, so sorry if this is a mess! :/

1 Answer

Anna Casey
Anna Casey
3,101 Points
Anna Casey
Anna Casey
3,101 Points

You're using the tag

<image></image>

in your code, but it should be the abbreviated

<img>

with no closing tag. This may be causing the problem.

Matt Copeland
Matt Copeland
2,874 Points
Matt Copeland
Matt Copeland
2,874 Points

Thanks for the reply. I rebuilt that section of HTML exactly as it was done in the video and was still having the problem. I replaced all my images with Nick's example pictures, and the problem went away. So I think the problem is actually with my actual image sizing. Two images in particular, are a little longer than the others and if these were placed as the third or fourth image, it would throw everything off. I put those two as the first and everything is working now. I should probably make sure to double check that going forward.