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 trialthelearner
7,640 PointsAdding #gallery li a p CSS the images are not displayed properly
When I add the following CSS
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7;
}
my images look like this https://prnt.sc/f9z02f
So images are not all floating to the left as they should be. See the middle row? there should be two images. However, when I make the width of browser a little more, it starts showing up correctly.
But shouldn't the images show up same at any screen size?
1 Answer
Chris Jardine
13,299 PointsHi thelearner
The problem stems from the 1st boxs' text being on 3 lines and not 2 lines like the other boxes, thereby pushing the 3rd box to the right.
To fix this you either change the text so it will only have 2 lines, or clear the left of the 3rd box. You will have to create media queries so it only clears when you have 2 boxes per line.
box:nth-child(3) {
clear: left;
}