Si tengo una pantalla que mostrará 6 elementos en la versión de computadora, pero debajo del dispositivo móvil (414px), solo se mostrarán tres.
¿Hay alguna forma de lograr este efecto a través de css si no se cambia la estructura HTML?
.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>Aquí tienes.
.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>