How to use CSS to display only three items on a mobile device

November 12, 2021

If I have a screen that will display 6 items in the computer version, but below the mobile device (414px), only three will be displayed.

Is there a way to achieve this effect through css if the HTML structure is not changed?

.list {
  width: 300px;
}
.list .item {
  width: 100%;
  text-align: center;
  padding: 16px;
  background-color: #fed71a;
}

<ul class="list">
   <li class="item">about1</li>
   <li class="item">about1</li>
   <li class="item">about1</li>
   <li class="item">about1</li>
   <li class="item">about1</li>
   <li class="item">about1</li>
</ul>

>Solution :

Here you go.

.list {
  width: 300px;
}

.list .item {
  width: 100%;
  text-align: center;
  padding: 16px;
  background-color: #fed71a;
  list-style: none;
  margin-bottom: 1px;
}

@media (max-width: 414px) {
  .item:nth-child(4),
  .item:nth-child(5),
  .item:nth-child(6) {
    display: none;
  }
}

<ul class="list">
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
</ul>