Как сделать чтобы модуль не отображался в мобильной версии сайта?

  • 9 Ответов
  • 2514 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

beors

  • *
  • 7
  • 0
Здравствуйте. Подскажите, пожалуйста, как сделать чтобы модуль не отображался в мобильной версии сайта?

*

sergoguga

  • ******
  • 954
  • 62
  • www.mpbox.ru
а что в вашем понятии мобильная версия? это подготовленная работающая версия шаблона?
или открыв сайт на планшете, вы думаете, что сайт вам показывает свою мобильную версию? а сам сайт об этом в курсе?)))
самое простое - использовать медиазапрос в стилевом файле и вписав нужный класс в модуле, дать ему невидимость для мобильных разрешений экрана, все.
лучший вариант - делать условие в шаблоне, тобы для моб версии блок с этим вашим модулем не выводился вообще

сложно?))

тогда просто закажите адаптацию шаблона для мобильных устройств. сам шаблон может уже содержит кнопку - мобильная версия, вы не шукали его?
« Последнее редактирование: 11.08.2014, 01:04:39 от sergoguga »
>>> Верстка 100 евро - ждешь новый курс? Пиши!
>>> Создание моб. приложений по ГОСТу)))! Личка работает!
>>> Микроразметка по стандартам - цены адекват! Пиши, не боись!
>>> Личный кабинет на ZOO - уже сделан! Пиши в личку, не стесняйся!

*

midav

  • ******
  • 927
  • 113
...сам шаблон может уже содержит кнопку - мобильная версия, вы не шукали его?
Даешь волшебную кнопку ! *DRINK*
Ответы на вопросы по CSS . Откройте для себя Firebug

*

sergoguga

  • ******
  • 954
  • 62
  • www.mpbox.ru
Даешь волшебную кнопку ! *DRINK*
ну почему волшебную, просто щас новички обожают ставить навороченные шаблоны, правда потом убивают вагон времени на изучение возможностей шаблона, которые далее будут использоваться на 5%)))
с другой стороны, в навороченных шаблонах то, о чем просит ТС - действительно сделано в виде кнопки, т.е. там список модулей, лого, основные блоки сайта - все настроить можно для разных устройств по разному, абсолютно! т.е. реально видел такую адмнку шаблона, там табличка - по горизонтали список смартфон-ландшафт, смарт-портрет, планшет-ланд, планшет-портр, монитор такой-то, широкоэкранный, tv, ...
по вертикали - список модулей и тд, просто ставим галки и ВСЁ!
шаблон ы такие кончено я на свалку сразу, ненавижу, когда за меня думает какой-то там фреймворк над фреймворком)))

>>> Верстка 100 евро - ждешь новый курс? Пиши!
>>> Создание моб. приложений по ГОСТу)))! Личка работает!
>>> Микроразметка по стандартам - цены адекват! Пиши, не боись!
>>> Личный кабинет на ZOO - уже сделан! Пиши в личку, не стесняйся!

Цитировать
использовать медиазапрос в стилевом файле и вписав нужный класс в модуле, дать ему невидимость для мобильных разрешений экрана
А можно код для добавления такого CSS класса?

*

midav

  • ******
  • 927
  • 113
А можно код для добавления такого CSS класса?

Добавить в CSS код :
Код
@media ( max-width:640px ) {
имя нужного класса {
display: none;
}
}
Размер расширения экрана естественно тоже укажите сами, какой Вам нужен .
Ответы на вопросы по CSS . Откройте для себя Firebug

Что-то не работает...

В CSS шаблона прописываю:
Код
@media ( max-width:640px ) {
.mobil {
display: none;
}
}

В поле "Суффикс CSS-класса модуля" ставлю пробел и пишу mobil

Без пробела тоже не работает. Может что-то Неправильно?

*

midav

  • ******
  • 927
  • 113
Ну а класс модулю добавляется ? Посмотрите через FireBug . Если класс у модуля добавляется, то при уменьшении размера окна браузера, стили должны сработать .
Ответы на вопросы по CSS . Откройте для себя Firebug

Заработало само собой, видимо проблема была в кэшировании... Но один из модулей все равно упорно не хочет скрываться.
А можно ли также через добавление суффикса класса создать модули, которые будут отображаться только в мобильной версии, и что писать в CSS?

*

adcroco

  • **
  • 24
  • 0
В некоторых премиум шаблонах изначально поддерживается создание custom.css
Вставляешь в него (или в свой файл стилей), например:
Код
@media (max-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
.telefon {
display: none;
}
}
@media (max-width: 1200px) {
.telefon {
display: none;
}
}
@media (min-width: 979px) {
.telefon {
display: none;
}
}
@media (min-width: 768px) and (max-width: 979px) and (-webkit-min-device-pixel-ratio: 2) {
.telefon {
display: none;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.telefon {
display: none;
}
}
@media (max-width: 767px) {
.telefon {
display: none;
}
}
@media (max-width: 480px) {
.telefon {
display: none;
}
}
@media (max-width: 320px) {
.telefon {
display: none;
}
}

Не подходящее по ширине убрать! В модуле, где Суффикс CSS-класса модуля, пишешь telefon