Скрыть на мобильных 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 кода, все изменения вступят в силу.

 

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

 






info-effect.ru
Скрыть на мобильных CSS код любой элемент сайта обновлено: Январь 18, 2017 автором: Илья Журавлёв

16 комментариев

  • Иван 03.11.2017 Ответить

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

    • Илья Журавлёв 03.11.2017 Ответить Автор

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

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

  • Иван 03.11.2017 Ответить

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

    • Илья Журавлёв 03.11.2017 Ответить Автор

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

    • Илья Журавлёв 04.11.2017 Ответить Автор

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

  • Иван 04.11.2017 Ответить

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

    • Илья Журавлёв 04.11.2017 Ответить Автор

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

  • Иван 04.11.2017 Ответить

    Bazz CallBack Widget

    • Илья Журавлёв 04.11.2017 Ответить Автор

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

      • Ивае 04.11.2017 Ответить

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

        • Илья Журавлёв 04.11.2017 Ответить Автор

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

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

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

          • Иван 10.11.2017

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

          • Илья Журавлёв 10.11.2017 Автор

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

          • Иван 10.11.2017

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

          • Иван 10.11.2017

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

          • Илья Журавлёв 10.11.2017 Автор

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку Отправить комментарий, вы соглашаетесь с Политикой конфиденциальности и Пользовательским соглашением сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх