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 Adjust the Profile Page and Header

Julian Peters
Julian Peters
8,576 Points
Posted by 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
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
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
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.