Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Question about responsive web design lesson

The videos in the "How to make a website" lessons show how to code a html page with a gallery of 5 pictures. Do the images in this lessson have to be the same physical size in order to achieve the lesson results ? I have tried this on a different computer, an i-mac using 5 images of different sizes, and they don't align correctly as they do in the lesson.

4 Answers

Hi Glenn,

Could you be more specific about how they aren't aligned correctly? Because I think that can mean a few different things.

Have you made the correction to the :nth-child expression that is in the Teacher's Notes section? It should be :nth-child(3n + 1)

Are you saying that your 5 images are the same size among each other but different from the lesson files? If so, it should still work out because the images are resized to a width of around 28% in the css.

If you're saying that your 5 images have different aspect ratios among each other then they won't be the same size on the page. They'll all have the same 28% width but they will have different heights depending on what the width to height ratio is for each image. So you would have the tops of the images aligned but the bottoms wouldn't be and neither would the captions.

This should still work out though as long as you've properly cleared the floats using the expression 3n + 1 This allows you to have variable height items. You should still see 3 items per row even though bottoms aren't lined up anymore.

It is ideal to have images all the same size for galleries for optimum results in responsive designs. I am sure you may be able to have .pngs different sizes as long as they are bigger than the size of the gallery then you could resize them all with CSS to the correct size, but it would be easier just to have them the correct size to begin with. Something like Photoshop can be used to size the images the same :)

Thanks Jason. It is the height that is a problem because one of my images is a different height from the others. I will try your solution.

I think once you are properly clearing the floats then you should get a proper 3 column layout with 3 items per row.

At that point you can either just let it go and let that one image be shorter or taller than the others or you have to crop that image in an image editing application so that it has the same aspect ratio as the others. Then they should all be the same size on the page.

The key here is the aspect ratio. It needs to be the same across all the images if you want them to be the same size on the page.

A 100x200 image has the same ratio as a 400x800 image. If you set the width of both images in css at 50px then both of those images will appear the same size on the rendered page. 50px by 100px.

Of course, as Adam Sackfield noted, you should just have all your images the same physical size if you want them to be the same size on your page. Rather than relying on aspect ratios to be the same if physical dimensions are different like the example I gave.

I tried your solution and it seems to work great. The nth-child selector. Thanks to you both for your help.