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 Responsive Web Design and Testing Build a Three Column Layout

Arctic Leaf
PLUS
Arctic Leaf
Courses Plus Student 40,079 Points
Posted by Arctic Leaf
Arctic Leaf
Courses Plus Student 40,079 Points

Making all images the same size...

When I expand to desktop screen size. One of my images doesn't align properly and I believe that it is because I used my own images for this project and they are different sizes. So one of the pictures that is longer blocks the row below it from lining up underneath. Is there a way to make all the images fit into there backgrounds the same size?

Ali Amirazizi
Ali Amirazizi
16,087 Points
Ali Amirazizi
Ali Amirazizi
16,087 Points

You can explicitly set the image sizes using the width and heigh attributes within the img tag; or you can use CSS. Can we see your code to better understand the problem.

2 Answers

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

You can explicitly set the size of the image by selecting the image and using the width and height properties.

If you think my answer was good, feel free to mark it as best answer below, if you need more help in the future from me, you can contact me at devinwscheu@gmail.com.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jonathan,

If your goal is to have all your images the same size as in the project then your best bet is to go into an image editing program and crop the offending images.

If you're ok with different height images and only want the rows to line up properly then the nth-child float clearing solution shown in this video should fix it for you.

Have you made the correction that is shown in the Teacher's Notes for this video? The expression should be 3n + 1 and not 4n

This was needed in case some captions were too long and caused blocking in the next row. However, it should also solve the problem of longer images.