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
Alexander Strand
9,536 PointsHow should I code my css (nth-child) when the text under the first image in my gallery is wrapping and causing issues?
In the video we are given:
#gallery li:nth-child(4n) {
clear: left;
}
I have added custom imagery and comments for my own photos and the text underneath the first image in my gallery is causing spacing issues when in mobile view. I tried to type (1n) in place of (4n) but it causes all of the images to line up in one vertical column.
Any ideas?
4 Answers
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsCode Correction
In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.
Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.
This is written under the Video you are watching now. Try this. Nick already provided the answer.
Thanks goes to Nick Pettit :)
Alexander Strand
9,536 PointsNo I understand. I did watch the entire video, maybe I missed it. I tried the code but it still messes up on my iphone 5 when testing. The <p> text underneath my first photo still causes the 3rd photo to move. I could just make the text a bit shorter... but that is not a good way to fix things in the long run. Nejc Vukovic Nick Pettit
Alexander Strand
9,536 PointsThanks. I was unaware of the "added information" underneath the videos. Thank you Nejc Vukovic.
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsWelcome. But you should thanks Nick for the problem solve :)
I also learned to always look all the way through. And listen all the way through.
I do it when reading a webpage (but the infinite scroll web pages are a bit tricky :) ), watching a movie (fast forward to the end when the end titles start, listening Gorillaz CD 'till the end -> extra song :) ...
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsWell you could shorten the text, but that would mean cutting information that may matter. Either you make the text in smaller font size or you could fork your workspace and give me a crack at it. I'm not a professional like Nick Pettit is but solving such problems is always fun.
Just a thought: you could try and > clear: both; < on the 3rd child element ?