CODEWITHSUNDEEP
htmlcssresponsive-design
Zeyad Shaban
Zeyad Shaban

Reputation: 1016

How to make a responsive horizontal list

I want to achieve a horizontal list and when the screen goes small the items become under each other, I explained that poorly, i want something like that what stack overflow has: enter image description here

I tried some bootstrap4 but It doesn't seem it's working, when the screen goes smaller the list expands the document causing very bad mobile user experience, any solution?

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Upvotes: 1

Views: 2165

Answers (2)

Ravi
Ravi

Reputation: 91

Responsive list below 767px screen

ul{
  list-style-type:none;
}
ul li{
  display: inline-block;
  border:1px solid grey;
  padding: 5px;
  color:blue;
}
@media only screen and (max-width: 767px){
  ul{
    width: 400px;
  }
  ul li {
    color: red;
    display: block;
  }
}
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Upvotes: 1

Petr Nečas
Petr Nečas

Reputation: 485

  .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1000px;
  }

  .list-group-item{
    min-width: 200px;
  }
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
</ul>

Flexbox

Is this what do you want to achieve?

Upvotes: 1

Related Questions