I have two lists which sit side by side. On desktop, these lists will display the li
elements as a column. However, for mobile, I want the li
's to become a two column layout, with equal options in each column. I.e. if there are 11 li
elements in total, it'll be one column of 6 and the other with five. Don't want 8 elements in one column then 3 in the other.
What I'm trying to achieve:
- A column with max five li elements.
- If a column has list has only five elements, show only one column which is centered.
My current approach uses a max-height property, which breaks the layout on mobile, but it's the only approach I have came across which kind of works.
Sample code:
.main__wrapper{
display:flex;
flex-direction: row;
}
.wrapper-one{
padding-left:40px;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
text-align:center;
}
ul li{
font-size: 1rem;
overflow: hidden;
}
@media (max-width:576px) {
ul{
-webkit-flex-flow: wrap column;
text-align: center;
flex-flow: wrap column;
max-height: 400px;
border: 1px solid red;
}
ul li{
max-width: 50%;
}
}
<div class="main__wrapper">
<div class="wrapper-one">
<h3>Heading 1</h3>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div class="wrapper-one">
<h3>Heading 2</h3>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
Currently, my list appears in two columns if there's more than five list elements, but the max-width: 400px;
breaks the layout on mobile. The width is being used to enforce the max 5 in each column.
iPhone 6/7/8 Plus:
Second list (types of video), there's on five li's in that column, I want it to therefore, be centered.
iPhone 6/7/8:
As you can see, the strucure breaks on smaller screens.