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
Grace Grantham
518 PointsCan I make my images the same size or line up equally on both vertical and horizontal axes equally with css/html?
Hi! I've reached the Style the portfolio Video. The only problem I'm having is aligning the images horizontally. The original sizes don't match, and so they aren't the right height. is there a way of adjusting that via css or html?
3 Answers
Connor Hamilton
5,023 PointsThe size of the images?
You can either edit it with a photo editor (photoshop)
Or make a div for the image and make the image a background image.
So html will be like:
<div class="image"></div>
CSS will be:
.image { height:200px; width: 200px; background-image:url('paper.png'); background-position:top left; }
The background position image can be left if you want to use the whole image or it accepts %, pixels or just center, left , top properties.
Also to align your images if you want to make it responsive make sure all images have a width % in your body tag and float the images to the left, they should then align perfectly.
Hope that helps.
David Valles
18,487 PointsGrace, In this video you don't have to tinker with the images directly. This code is what sets the images in a horizontal position:
``CSS
gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
} ``
At 5:40 into the video, Nick places this code in and images then line up. I hope that helps!
David Valles
18,487 PointsSorry... i didn't do my markdown correctly. it's:
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
Grace Grantham
518 PointsThanks guys, all very helpful!