Как сделать, чтобы div только показывался на рабочем столе?

Question

В настоящее время я использую оповещение div, которое я использую, и которое я хотел бы показывать только на рабочем столе.

Я использую класс content-desktop в своем контейнере, но все еще вижу этот div в мобильном телефоне. Как мне показать этот div только на рабочем столе?

 <div class="feedback-container content-desktop" id="alert-dialog">
        <div class="feedback-left">
          <p>Have any feedback? Reach out to us!</p>
            </div>
            <div class="feedback-right">
            <button class="feedback-button">Give Feedback</button>
            <button class="feedback-button">Dismiss</button>
        </div>
            </div>

Answer 1

Вы можете использовать css медиазапросы

@media(max-width:991px){
  .content-desktop(
             display:none;
   )
  }

Answer 2

Вы можете использовать CSS Медиа-запросы , чтобы показывать его только на экранах, больших, чем XXXpx

@media screen and (max-width: 767px) {
  .content-desktop {
    display: none;
  }
}

Здесь это будет скрыто для экрана, меньшего чем 767px

Вы должны добавить это в отдельном файле CSS или между тегами стиля

Answer 3

Для этого вам понадобится адаптивный код дизайна. Для ограничения должно быть достаточно около 900 пикселей:

@media screen and (min-width: 800px) {
    .yourclass { 
        min 800px
    }
}