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 CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Struggling to understand how the unordered list is wrapping all list items to the next line when using inline-block?

Hi!

Why exactly do all list items drop below the .name when the view port gets smaller?

Thanks, James.

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

@James Barett It's because we set the list items to display one next to each other (inline-block) only for screens with a min-width of 769 pixels (check the media query). On everything smaller than this (mobile for example), the list elements will display block, meaning one on top of the other. That is because we didn't style them to display: inline-block. I hope that helps.

1 Answer

Travis Sweeney
Travis Sweeney
10,973 Points
Travis Sweeney
Travis Sweeney
10,973 Points

It helps to see your code, but what is most likely happening is that the width of your unordered list is wider than that of the viewport. Check the font-size, padding and margin of your list items to see how wide they make the ul element.