0

В примере сейчас 4 элемента. Задача в том что могут добавляться новые элементы, их может быть любое количество, это блок акции на сайте. Сейчас в медиа запросах указаны конкретные элементы которые должны скрываться, а нужно сделать так чтобы они скрывались автоматом вне зависимости от того сколько будет элементов в контейнере. Чтобы после добавления нового не приходилось переписывать стили, уйти от привязки к определённому элементу.

<div class="container">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
.container {
  width: 100%;
  height: 300px;
  background-color: green;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.example {
  background-color: yellow;
  height: 200px;
  width: 20%;
}

@media (max-width: 1350px) {
    .example:last-child {
        display: none;
    }
}

@media (max-width: 1050px) {
    .example:nth-child(3) {
        display: none;
    }
}

@media (max-width: 700px) {
    .example:nth-child(2) {
        display: none;
    }
}

1 ответ 1

2

Насколько я понял, вам нужно чтобы для разных экранов показывалось только определенное количество элементов (первых по списку). Для этого можно использовать:

.example:nth-child(n+2) {
    display: none;
}

В данном случае все элементы ниже второго будут спрятаны Или:

.example:nth-child(n+3) {
    display: none;
}

В данном случае все элементы ниже третьего будут спрятаны. Поставьте эти стили для нужного медиазапроса и все.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.