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
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.
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 tried your solution and it seems to work great. The nth-child selector. Thanks to you both for your help.