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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

imre redai
imre redai
3,762 Points
Posted by imre redai
imre redai
3,762 Points

How do I make all my images same dimensions?

I was following the code but used different images. Some are taller than others and it looks weird and not symmetrical on my web page. Can anybody give me code that will make my images all the same size, or framed in all in some sort of square?

gallery{

 margin:0;
 padding:0;
 list-style:none;}

gallery li{

 float:left;
 width:45%;
 height:45%;
 margin:2.5%;
 background-color: #000;
 color:#bdc3c7;}
nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

I am not sure it will fully solve how they look, but did you try using max-height and max-width instead?

2 Answers

codegay
codegay
14,410 Points
codegay
codegay
14,410 Points

Instead of targeting the li, try targeting the ul itself. I'm not sure it work thou

Gustavo Winter
PLUS
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

Target the images by using min-weidth / max weidth and max/min - height.