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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Wendy Peralta
Wendy Peralta
11,203 Points
Posted by Wendy Peralta
Wendy Peralta
11,203 Points

My images are not aligning correctly.

It's hard to explain without being able to attach a screenshot, but I will try my best.

I have followed along with the video, code by code, to align my images correctly as if we were on a mobile site. The final result on video shows the images look like this:

img 1 | img 2

img 3 | img 4

img 5 | twitter/FB logo

This is what mine looks like: http://codepen.io/anon/pen/opHgk. image 3 is places under image 2 (with a blank space under image 3). Then image 4 and 5 are side by side, and the twitter/FB logos are centered on the bottom. To see what I mean, make sure you are shrinking the display to a mobile-like ratio.

Why is there a blank space under my image 3? My code is the exact same code as the video. Shouldn't I be getting the same visuals? Or is it depending on browser and display? I wouldn't think so, since we're trying to scale for a mobile website.

Thanks for you time!

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Just checking that you realize the gallery is inside an ID so it should be 

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}
James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Oh sorry missed you code pen demo up there. You need to add a clear: both in order to get the footer to be at the bottom.

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

And to fix your issue with the 3rd image playing up you will need use:

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

4 Answers

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Yea it took me a while to begin with and still does! No worries hope it goes ok for you. Just remember to try break the problem down, i use dev tools in any browser to help understand what the element is doing before the one that breaks.

Goodluck.

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

try gallery{ display: inline; }

or try fiddling around with the other display attributes.

Wendy Peralta
Wendy Peralta
11,203 Points
Wendy Peralta
Wendy Peralta
11,203 Points

James Ingmire I changed the nth-child from 4n to 3n and it worked beautifully. Thank you SO much for your quick reply!!!!!!!!!!!!!!!!!!! (Didn't know how to reply to your answer so I posted an answer for my own question... lol *noob alert).

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Wendy,

:nth-child(3n) isn't the correct expression for a two column layout. It will work for up to 4 and possibly 5 images but will fail with 6 or more images. You can try by duplicating one of your images so that you have 6 and see the result.

You want to clear the floats on the first item of every row. So in a two column layout that would be 1st, 3rd, 5th, 7th,...

The correct expression to select those items is :nth-child(2n + 1) This will select the 1st item and then every second item after that. You can also use :nth-child(odd) which is equivalent.

Wendy Peralta
Wendy Peralta
11,203 Points
Wendy Peralta
Wendy Peralta
11,203 Points

Jason Anello Thank you very much! I understand now.