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

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

@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

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.