• Главная
  • uCoz
  • Как сделать адаптивным системный вид материалов модулей и информеры ?
Как сделать адаптивным системный вид материалов модулей и информеры ?

Как сделать адаптивным системный вид материалов модулей и информеры ?

О чем материал ?

Имея на сайте системный стандартный шаблон, мы просматриваем наш сайт на мобильных и ругаемся, что вид материалов не имеет адаптивности, особенно это относится к ситуациям, когда шаблон вида материалов в 2 и более колонки.

Дополнительно, мы часто используем системные информеры для вывода материалов с разных модулей ( новости, блог, каталоги и магазин ). Сегодня будет предложено достаточно просто решения, чтобы адаптивность как информеров так и шаблона вида материалов на мобильных исправить несколькими строками стилей CSS.

Делаем адаптивный вид материалов модулей 

Перейдите в Панель управления - Главная - Дизайн - Управление дизайном CSS и установите в самый низ таблицы стилей с новой строки после всех стилей вот такую строку media условие:

@media screen and (min-width: 240px) and (max-width: 650px) { [id^=entryID],[id^=entryID] div { width: 100%!important; float: left; } }

отмечу, этот фикс работает лишь если вид материалов в несколько колонок, для вида в 1 колонку это не работает и нет в этом надобности.

Делаем адаптивными системные стандартные информеры материалов

Перейдите в Панель управления - Главная - Дизайн - Управление дизайном CSS и установите в самый низ таблицы стилей с новой строки после всех стилей вот такую строку media условие:

@media screen and (min-width: 240px) and (max-width: 650px) { .infTd { width: 100%!important; float: left!important; display:inline-block!important; } }

вот такая небольшая строка стилей на мобильных ваши информеры выровняет в 1 колонку и они не будут выходить за пределы экрана.

Делаем адаптивный вид материалов для фотоальбома в PDA версии

Перейдите в Панель управления - Главная - Дизайн - Управление дизайном - Шаблоны для PDA версии сайта - Таблица стилей (CSS),  установите в самый низ таблицы стилей с новой строки после всех стилей вот такую строку:

li.phtTdMain.uEntryWrap { width: 100%!important; float: left!important; }

это решение выровняет ваши фото в пда версии сайта в одну колонку и все будет красиво отображаться и не будет выходить за грани экрана.

Примечание

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

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar