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

FAQ по адаптивности для сайтов uCoz и uWeb

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

Имея на сайте системный стандартный шаблон, мы просматриваем наш сайт на мобильных и ругаемся, что вид материалов не имеет адаптивности, особенно это относится к ситуациям, когда шаблон вида материалов в 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; }

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

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

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

@media screen and (min-width: 240px) and (max-width: 650px) {#table1 td {display:block;}}

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

Делаем адаптивной локальную форму регистрации на мобильных

Перейдите в Панель управления - Главная - Дизайн - Управление дизайном - Пользователи - Страница регистрации пользователей ( /panel/?a=tmpl;m=4;t=2 ),  установите в самый низ перед тегом </body> с новой строки вот такую строку стилей:

<style> @media screen and (min-width: 240px) and (max-width: 650px) { td.manTd1,td.manTd2,[id^=siM]  {display:block;} } </style>

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

Делаем адаптивными фото на ваших сайтах

Часто вижу вопросы пользователей, что фото выходит за пределы сайта и растягивает каркас или рвет его. Решение в данной ситуации всегда просто, достаточно в таблицу стилей CSS сайта прописать следующую строку:

img {max-width: 100%!important; height: auto!important;}

в 99% случаев это решает вопрос адаптивности фото.

Тег (pre) рвет каркас сайта и добавляет скрол

Часто вижу такую проблему на сайтах учителей и часто именно образовательные сайты спрашивают как исправить проблему слишком большой ширины сайта при использовании тега pre на страницах и материалах сайта.

Решение достаточно простое, нужно в таблицу стилей CSS сайта прописать следующую строку:

pre {white-space: normal;}

эта строка автоматически решит проблему с тегом pre.

Как сделать адаптивными таблицы на ваших сайтах

Прежде всего, стоит учесть, что для таблиц никогда нельзя задавать фиксированную ширину подом width="700" и прочее, если прописываете ширину то лишь width="100%". Если будете прописывать фиксированной ширину, тогда таблица не будет адаптивной.

Да, бывает также, что таблица слишком большая по ширине и тогда все равно ломает адаптивность, тогда решение другое, слишком большие по ширине таблицы заворачивайте в код:

<div class="table-container">здесь код таблицы</div>

В стили при этом стоит прописать:

.table-container
{
 width: 100%;
 overflow-y: auto;
 _overflow: auto;
 margin: 0 0 1em;
}

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

Примечание

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

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

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

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Подскажите пожалуйста, Можно ли с помощью предложенных решений справиться с такой проблемой:
Захожу на сайт с мобильного в вертикальном положении, он отображается нормально. Переворачиваю телефон в горизонтальное положение - нормально. Возвращаю в вертикальное положение - страница оказывается меньшего масштаба и прижата к левой стороне экрана.
Пока не перезагрузишь, ничего не происходит.

Не подскажите причину? (https://disk.yandex.ru/i/8_dPHrJMR5yFtg) это ссылка запись экрана.
avatar
Это стилями не исправить и кодом, это работа браузера, по сути браузер не успевает или не понимает как подстроить ширину сайта под ширину экрана после переворота.