Скрыть на мобильных CSS код любой элемент сайта

Мобильный

 Привет ! Сегодня вы узнаете как с помощью простого CSS кода можно скрыть показ любого элемента сайта на мобильных устройствах. Например, вы хотите, чтобы на основном сайте элемент отображался, а на мобильном устройстве не отображался. То есть, при достижении определённого размера экрана, элемент будет автоматически скрываться. Вы можете скрывать таким образом любые элементы сайта, меню, формы, виджеты, веб-элементы и т.д.

Вам нужно будет установить специальный CSS код, в котором нужно будет указать название CSS элемента и максимальный размер экрана. Вот этот CSS код:

 

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

 

1 строка – Здесь нужно указать максимальный размер ширины экрана в пикселях, при котором элемент не будет показываться. То есть, при достижении ширины экрана в 600 пикселей элемент будет автоматически скрываться.

2 строка – Здесь нужно указать название элемента для CSS.

Остальные строки оставьте без изменений.

 

Если ваш сайт на WordPress, вам поможет плагин – Simple Custom CSS. В поле плагина вы добавите данный CSS код.

Чтобы узнать CSS название элемента сайта, нажмите правой кнопкой мыши по данному элементу, в открывшемся окне нажмите на вкладку – Просмотреть код. Далее, в правой части экрана у вас откроется исходный код данного элемента. На вкладке “Styles” вы сможете посмотреть название CSS элемента.

 

узнать CSS сайт название

 

После сохранения CSS кода, все изменения вступят в силу.

 

Остались вопросы ? Напиши комментарий ! Удачи !

 

 
Добавить комментарий

  1. Иван

    название css это что? никак не удается настроить под мобильную версию

    Ответить
    1. Admin автор

      Название стиля, то что отображается над стилями, перед скобкой {

      Нажмите правой кнопкой мыши по элементу (который хотите скрыть) в открывшемся окне нажмите на вкладку Исследовать элемент или Посмотреть код. Справа откроется редактор, там можно скопировать название стиля в CSS, в самом верху отображается. Можно использовать плагин SiteOrigin CSS, если вам пока сложно понять о чём речь идёт.

      Ответить
  2. Иван

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

    Ответить
    1. Admin автор

      А что вам не понятно? Я же всё объяснил. Не важно про что вы говорите, для всех всё одинаково.

      Ответить
    2. Admin автор

      Укажите в CSS коде минимальный размер экрана на котором будет отображаться ваш виджет. Всё готово! Код тот же, просто размер по меняйте. Понимаете?

      Ответить
  3. Иван

    Да я все вроде сделал , установил плагин у меня вордпресс

    Ответить
    1. Admin автор

      Какой у вас стоит плагин caallBack? Похоже я вам не правильный совет дал.

      Ответить
  4. Иван

    Bazz CallBack Widget

    Ответить
    1. Admin автор

      А разве этот виджет не отображается на мобильных устройствах?

      Ответить
      1. Ивае

        к сожалению нет, зайдите на potolok-vipmsk-ru с мобильного

      2. Admin автор

        Вот вам решение:

        @media screen and (max-width: 100px) {
        .bazz-widget {
        visibility: hidden;
        display: none;
        }
        }

        Размер свой укажите, любой, какой вам нужен. Данный код обозначает – если размер ширины экрана меньше 100 px, виджет не будет показываться. Выше 100 на всех экранах будет отображаться. Не забудьте кэш удалить на мобильном.

      3. Иван

        Что я не делал, к сожалению не показывает, хотя если прописываю к примеру 10000 px то на ноуте перестает показывать что говорит о том что код работает.

      4. Admin автор

        Кэш чистили на мобильном? И если у вас на сайте стоит кэширующий плагин, в нём надо тоже кэш удалить.

      5. Иван

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

      6. Иван

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

      7. Admin автор

        Я проверял на своём черновом сайте, на компьютере, окно сворачивал до маленького размера.