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 Styling Web Pages and Navigation Style the Image Captions

Posted by thelearner
thelearner
7,640 Points

Adding #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
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi 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;
}