Привет ! Сегодня вы узнаете как с помощью простого 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 это что? никак не удается настроить под мобильную версию
Название стиля, то что отображается над стилями, перед скобкой {
Нажмите правой кнопкой мыши по элементу (который хотите скрыть) в открывшемся окне нажмите на вкладку Исследовать элемент или Посмотреть код. Справа откроется редактор, там можно скопировать название стиля в CSS, в самом верху отображается. Можно использовать плагин SiteOrigin CSS, если вам пока сложно понять о чём речь идёт.
я про caallBack виджет говорю, мне надо чтоб в мобильной версии работал, и вот как определить названии css если мне не крывать нужно а наоборот чтоб его видно было.
А что вам не понятно? Я же всё объяснил. Не важно про что вы говорите, для всех всё одинаково.
Укажите в CSS коде минимальный размер экрана на котором будет отображаться ваш виджет. Всё готово! Код тот же, просто размер по меняйте. Понимаете?
Да я все вроде сделал , установил плагин у меня вордпресс
Какой у вас стоит плагин caallBack? Похоже я вам не правильный совет дал.
Bazz CallBack Widget
А разве этот виджет не отображается на мобильных устройствах?
к сожалению нет, зайдите на potolok-vipmsk-ru с мобильного
Вот вам решение:
@media screen and (max-width: 100px) {
.bazz-widget {
visibility: hidden;
display: none;
}
}
Размер свой укажите, любой, какой вам нужен. Данный код обозначает — если размер ширины экрана меньше 100 px, виджет не будет показываться. Выше 100 на всех экранах будет отображаться. Не забудьте кэш удалить на мобильном.
Что я не делал, к сожалению не показывает, хотя если прописываю к примеру 10000 px то на ноуте перестает показывать что говорит о том что код работает.
Кэш чистили на мобильном? И если у вас на сайте стоит кэширующий плагин, в нём надо тоже кэш удалить.
да все чистил, в данный момент код прописан в стилях, зайдите попробуйте он не отображается .
хотя я тут поюзал не на одном сайте не нашел чтоб отображался, дайте ссылку сайта где вы говорите отображается.
Я проверял на своём черновом сайте, на компьютере, окно сворачивал до маленького размера.
Все бы хорошо, но стоит включить кэш, всем вашим кодам грош цена. По крайней мере в joomla. Включи системный кэш и удивись.