За последние 24 часа нас посетили 20658 программистов и 1010 роботов. Сейчас ищут 348 программистов ...

Скрыть блок только на ПК через CSS

Тема в разделе "HTML и CSS", создана пользователем ВадимНН, 1 дек 2021.

  1. ВадимНН

    ВадимНН Новичок

    С нами с:
    1 дек 2021
    Сообщения:
    5
    Симпатии:
    0
    Адрес:
    Нижний Новгород
    Подскажите плиз, какой задать CSS в Wordpress в блоке SiteOrigin Слайдер что бы он скрывался только на ПК.
    Как скрыть на мобильном информация есть на просторах.
    Поиски, что бы скрыть только на компьютере, оставив видимость на мобильном, успехом пока не увенчались.
    Думаю тут есть хорошие спецы, которые помогут.
     
  2. Vanchot

    Vanchot Активный пользователь

    С нами с:
    23 мар 2019
    Сообщения:
    104
    Симпатии:
    19
    Адрес:
    Ахерон (LV-426)
  3. ВадимНН

    ВадимНН Новичок

    С нами с:
    1 дек 2021
    Сообщения:
    5
    Симпатии:
    0
    Адрес:
    Нижний Новгород
    Тёмный лес.

    Мне бы что попроще, на пальцах.

    Нашёл код как скрыть на мобильном, работает:

    @media screen and (min-width: 600px) {
    #chto_ne_pokazyvat {
    visibility: hidden;
    display: none;
    }
    }

    Нашёл код как показать только на мобильном - не работает:

    .show-on-mobile { display: none; }
    /* Smartphone Portrait and Landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ .show-on-mobile { display: inline; }}

    Если можно, напишите правильный код.
     

    Вложения:

  4. Vanchot

    Vanchot Активный пользователь

    С нами с:
    23 мар 2019
    Сообщения:
    104
    Симпатии:
    19
    Адрес:
    Ахерон (LV-426)
    Да, что-то плохо работает определение девайса. Сейчас проверял, думал, что-то улучшили, но нет, только по размеру можно предположить. Например, если предполагать, что от 800px в ширину начинаются мониторы, то сработает так
    HTML:
    1. <!DOCTYPE html>
    2.     <title>Проверка media запросов</title>
    3.     <meta name="viewport" content="width=device-width, initial-scale=1">
    4.     <style>
    5. @media screen {
    6.     .scr {display: block;}
    7.     .mob {display: none;}
    8. }
    9. @media not screen, (max-width: 799px) {
    10.     .scr {display: none;}
    11.     .mob {display: block;}
    12. }
    13.     </style>
    14. </head>
    15. <div class="scr">Этот блок для ПК</div>
    16. <div class="mob">Этот блок для МУ</div>
    17. </body>
    18. </html>
    Правило "not screen" - на будущее. Сейчас у меня, например, игнорит его, как и указание девайса handheld.
    Для определения ширины на мобильном не забудьте добавить в шапке
    HTML:
    1. <meta name="viewport" content="width=device-width, initial-scale=1">
     
    #4 Vanchot, 1 дек 2021
    Последнее редактирование: 1 дек 2021
  5. ВадимНН

    ВадимНН Новичок

    С нами с:
    1 дек 2021
    Сообщения:
    5
    Симпатии:
    0
    Адрес:
    Нижний Новгород
     

    Вложения:

  6. Vanchot

    Vanchot Активный пользователь

    С нами с:
    23 мар 2019
    Сообщения:
    104
    Симпатии:
    19
    Адрес:
    Ахерон (LV-426)
    У Вас нужно скрыть тег с id #chto_ne_pokazyvat? Тогда поправьте. На скрине Вы вставили мои классы. В моём примере на ПК скрывается класс mob, на мобильном скрывается класс scr
     
  7. ВадимНН

    ВадимНН Новичок

    С нами с:
    1 дек 2021
    Сообщения:
    5
    Симпатии:
    0
    Адрес:
    Нижний Новгород
    Эх, вот ещё понять бы о чём вы?

    Так?

    @media screen {
    .scr {display: block;}
    .mob {display: none;}
    }
    @media not screen, (max-width: 799px) {
    #chto_ne_pokazyvat {
    .scr {display: none;}
    .mob {display: block;}
    }
     
  8. ВадимНН

    ВадимНН Новичок

    С нами с:
    1 дек 2021
    Сообщения:
    5
    Симпатии:
    0
    Адрес:
    Нижний Новгород
    Кто владеет информацией, плиз, напишите просто код без бубнов.