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

Posted by Graziella Brincat
Graziella Brincat
4,981 Points

List Items Not Resizing to Browser Window

I have two panels, one left panel with image links and another right panel with a google map. Both are contained in a wrapper container. All heights are set to 100%, however, when I resize the browser window, the left panel does not resize, and stays the same height. (Width resizes just fine) This causes the footer, wrapper and right panel to move up, and the left panel moves underneath the footer. I can see that the wrapper, and the ul are resizing, but the list items are not.

Here is the css:

left-panel {

width: 22%;
height: 100%;
float:left;
margin: 2% 1% 2% 2%;
padding: 0;
}

image-list {

margin: 0;
padding: 0;
list-style: none;
height: 100%;
}

image-list li {

max-width: 100%;
height: 100%;
margin:0;
}

How can I make the images resize with the browser window resize? Thank you.

Dani Ivanov
Dani Ivanov
10,732 Points

Maybe its a silly thing but have you set the height 100% to the HTML element itself?? Maybe it would be handier if you provide the whole CSS/HTML of the troubled area/spot.

2 Answers

Ethan Lowry
PLUS
Ethan Lowry
Courses Plus Student 7,323 Points
Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

Perhaps you need to set the height on the actual img element inside theli also?

Graziella Brincat
Graziella Brincat
4,981 Points
Graziella Brincat
Graziella Brincat
4,981 Points

Hi,

thanks for your feedback here is the full css code:

html, body { height: 100%; }

img { max-width: 100%; height: auto; }

wrapper {

max-width: 95%;
height: 100%;
margin: 0 auto;
}

right-panel {

width: 72%;
height: 100%;
float:right;
margin: 2% 2% 2% 1%;
padding: 0;
}

left-panel {

width: 22%;
height: 100%;
float:left;
margin: 2% 1% 2% 2%;
padding: 0;
}

image-list {

margin: 0;
padding: 0;
list-style: none;
height: 100%;
}

image-list li {

max-width: 100%;
height: auto;
margin:0;
}

The right panel and contents will always scale correctly, regardless of the window size. Is there a way for the list and list items to take up all the space of the container and scale accordingly? Then I should just worry about scaling the container and not each item inside it.

Thank you again, Graziella