Как сделать скрытие блоков при уменьшение ширины экрана без js?

Question

[Виталий]

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

<div class="items">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
      </div>

.items {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}
.item {
  padding: 16px;
  margin-top: 16px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  text-align: center;
  min-width: 80px;
  width: 100%;
}

Answer 1

[Илья Жулин]

Медиа запросы в зависимости от ширины экрана

Comments

[Виталий]

Если я не знаю точную ширину экрана, то мне все варианты описывать?

[Илья Жулин]

Да, желательно вёрсткой предусмотреть, при какой ширине экрана блок станет нечитаемым настолько, что его надо скрыть.

[Виталий]

Спасибо

Answer 2

[FeST1VaL]

Media запросы

Comments

[Виталий]

т.е нужно описывать все варианты экранов или общий можно сделать?

[Gary_Ihar]

Виталий, почитайте про медиазапросы и сделайте так, как нужно именно вам.

Answer 3

[Lord_Dantes]

Можно сделать с помощью медиа-запросов до 1200px, до 1600 и т.д

Comments

[Виталий]

А как допустим убрать 9 и 8 блок, при медиа-запросе до 800px, дополнительный класс навешивать?

[Lord_Dantes]

Как вариант можно через :nth-child(8)

[Виталий]

Lord_Dantes, точно, спасибо