Как «спрятать» содержимое элемента html, когда браузер изменил размер экрана на мобильный?

Question

Как «спрятать» html содержимое элемента, когда браузер изменил размер экрана на мобильный? Но когда я вернусь к размеру экрана рабочего стола, он будет «скрыт»? Все css подобные цвета должны быть сохранены независимо от размера экрана. Кстати, я использую javascript / jquery для динамического создания этих тегов таблицы html элементов, что уже сделано.

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

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

Answer 1

Оберните текст элементов в span классом (скажем, wide-only, но фактическое имя не важно), и используйте медиазапрос , чтобы скрыть его при отображении область ниже определенного размера через CSS:

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

Если ширина экрана меньше 400 пикселей, это правило будет скрывать span s.