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
Glenn Gallo
5,297 PointsQuestion 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Adam Sackfield
Courses Plus Student 19,663 PointsIt 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 :)
Glenn Gallo
5,297 PointsThanks 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.
Jason Anello
Courses Plus Student 94,610 PointsI 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.
Glenn Gallo
5,297 PointsI tried your solution and it seems to work great. The nth-child selector. Thanks to you both for your help.