Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Julian Peters
Julian Peters
8,576 Points

Equal background-height for gallery list items

On the index.html when resizing the page the text below the pictures of the gallery is wrapping resulting for some pictures in three lines for others in two lines. Consequently the background-height for the #gallery li varies. On the site this results in the appearance of grey "boxes" underneath the pictures with different heights. Is their a way to tell the code to adjust all the heights of the backgrounds below the pictures in a way so that it is always as high as the longest text - so the text with the most lines? Result should be that all the grey "boxes" underneath the pictures have always the same height?

3 Answers

Yulia Markina
Yulia Markina
12,616 Points

Hi Julian! It would be very helpful to see your code, but there are ways to adjust height of your boxes that contain pictures and text. One of them is to give the same class for your boxes and set their height in your CSS. I made an example for you in CodePen http://codepen.io/anon/pen/RNJwpV I didn't put any images, but it should be OK with them, too. Hope this example helps.

Julian Peters
Julian Peters
8,576 Points

Hi Yulia,

sorry - first questions in this forum and I thought that everybody could see the code because I raised this question within a specific lesson. Thank you for your response. Your answer is not quite what I am looking for though. Taking your example in CodePen I am searching for a way to set an auto height (not a fixed height) for the boxes. The code should automatically recognize the box height of the box with the text with the most lines and adjust the height of the residual boxes accordingly. All boxes should only be as heigh as possible. I hope that makes sense.

Yulia Markina
Yulia Markina
12,616 Points

I believe, in Nick's example the height of the boxes just happened to be equal (OR he didn't show that piece of CSS for adjusting heights). The pictures have the same size and the description takes almost the same amount of space. Because their margins set in percentages, they resize equally, too.

Without any CSS properties, though, the height of any block element is based on the content size and will be applied automatically.

The are many solutions for adjusting heights of elements using not only CSS but Javascript as well. I hope this helps a bit.