Как убрать текст с помощью CSS при адаптации?

Question

При адаптации текст в блоке надо убрать, реализовать это надо желательно на CSS, но JavaScript допускается

Answer 1

медиа-запросы в помощь https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries

<div class="box">Some text</div>

в стилях:

@media only screen and (max-width: 600px) {
  .box {
    display: none;
  }
}

(Поставить display:none если окно браузера имеет размер 600 пикселей или меньше)

А с помощью js примерно так:

function myFunction(x) {
  const $box = document.querySelector('.box')
  if (x.matches) { // If media query matches
    $box.innerText = "";
  } else {
    $box.innerText = "Some text";
  }
}

const x = window.matchMedia("(max-width: 600px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

js код взят отсюда:
https://www.w3schools.com/howto/howto_js_media_queries.asp
И переделан конкретно под текст

БЛОГ НА HUSL

Как убрать текст с помощью CSS при адаптации?

Ответы (1 шт):