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

WordPress

 Привет ! Сегодня вы узнаете как с помощью простого 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 с мобильного

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

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

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

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

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

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

          2. Admin автор

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

          3. Иван

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

          4. Иван

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

          5. Admin автор

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

  5. Павел

    Все бы хорошо, но стоит включить кэш, всем вашим кодам грош цена. По крайней мере в joomla. Включи системный кэш и удивись.

    Ответить
  6. Алексей

    Ребята, помогите плиз. Я вовсе не айтишник. Я журналист. Но директор попросил именно меня, больше некого, разобраться и к чертям собачьим убрать с мобильной версии нашего корп. сайта надпись My account и идущие под ней слова login и т.д.
    Как это сделать, ё-моё???))

    Ответить
  7. Алексей

    Я про меню сайта, которое в мобильной версии справа раскрывается

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

      Пробовали плагин SiteOrigin CSS? Только нужно зайти в админ-панель WordPress с телефона.

      Ответить
      1. Алексей

        Не пробовал. Сейчас еще разпомучаю свои нервы))

        Ответить