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

Posted by Amy McKnight
Amy McKnight
10,124 Points

My #gallery items aren't staying in line. They break at strange points How could I fix this?

http://www.amymcknight.com/portfolio.html

I followed the instructions in the How to make a website course and my site turned out pretty good. I'm just having a few problems with the gallery section of my portfolio page.

When it is full screen. The start of the third line jumps to the third column. I thought that it was just the word "CMS" on the middle item on the second row that was causing the probem but when I deleted that the rest of the row still will not come up to the third line instead the last two pictures stay on the 4th (unecessary) row.

Also If you slide the screen to different sizes the gallery also starts to break. With white gaps where pictures should be.

Any help would be greatly apprecated!

http://www.amymcknight.com/portfolio.html

3 Answers

Jason Campbell
Jason Campbell
9,822 Points

Hi Amy, It looks like it is a line of css in your responsive.css file that is causing the problem. Try changing line 23 from

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

to

#gallery li:nth-child(3n+4) { clear: left; }

This causes the 4th li to start a new line (clear the float). Then every 3rd li after that is also cleared. You can learn more here https://css-tricks.com/how-nth-child-works/.

Hope that helps. Have a blessed week! -Jason

Amy McKnight
Amy McKnight
10,124 Points
Amy McKnight
Amy McKnight
10,124 Points

Jason,

You are the man! wow, I can't wait to know as much and be as helpful.

Blessings!

Amy

Jason Campbell
Jason Campbell
9,822 Points

Happy to help. One thing that really helps me is the tools in firefox. You can right click on the page and choose "inspect element". This shows all the styles applied to the element. You can learn more here. https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox Chrome has a version too and you can get more advanced plug ins.

If you didn't already know that. :)

Have a great weekend! I wish you the best in your career! -Jason

Amy McKnight
Amy McKnight
10,124 Points
Amy McKnight
Amy McKnight
10,124 Points

Thanks again Jason,

I haven't used that/ don't know how. But will look into how it works!

All the best,

Amy