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>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>