0

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:

enter image description here

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:

enter image description here

As you can see, the strucure breaks on smaller screens.

Georgi Hristozov
  • 2,917
  • 2
  • 15
  • 22
Freddy
  • 1,651
  • 2
  • 13
  • 40

1 Answers1

-1

Here you go, try the snippet in full screen and resize the screen. Adjust or apply correct media queries for your need. Also remember devices can both be portrait and landscape. In large screens the default list is shown and in small screen we force the list to break: Is there a way to break a list into columns?

@media only screen and (max-width: 600px) {
    /* For mobile phones: */
 .list{
      -moz-column-count: 2;
      -moz-column-gap: 20px;
      -webkit-column-count: 2;
      -webkit-column-gap: 20px;
      column-count: 2;
      column-gap: 20px;
 }
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>


<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>


</body>
</html>
BBB
  • 63
  • 7