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% случаев это решает вопрос адаптивности фото.

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

Достаточно в стили прописать:

iframe,video,object {max-width:100%}

Тег (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;
}

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

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

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

[id^=comEnt] {margin-left: inherit!important;}

некоторым может так же помочь дополнительное решение:

@media screen and (min-width: 240px) and (max-width: 650px) { [id^=comEnt] {max-width: 350px;margin-left: inherit!important;} }

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

Как решить вопрос с информерами, когда в комментарии лишь одно видео без описания ?

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

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

Решением в данной ситуации может быть в шаблоне информера следующее, находим код:

$MESSAGE$

и заменяем его на такое условие:

<?if(substr($MESSAGE$,0,14)=="<!--BBvideo-->")?><a href="$ENTRY_URL$">Прочесть комментарий...</a><?else?>$MESSAGE$<?endif?>

в результате мы решим наш вопрос и если в будущем еще снова будут комментарии лишь с видео, наше условие решит этот вопрос и верстка ломаться не будет.

Делаем адаптивным BB редактор комментариев для мобилок

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

@media screen and (min-width: 240px) and (max-width: 1000px) { ul.uf-form li span { display: inline-block; } }

и в результате вопрос будет решен.

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

В таблицу стилей CSS модуля магазин прописать условие:

@media screen and (min-width: 240px) and (max-width: 650px) {
table.catalog [id^=catalog-item-] {display:block;width: 100%!important;float: left!important;}
table.catalog [id^=catalog-item-] h3 {display: inline-block;}
table.catalog [id^=catalog-item-] img {width: 100%!important;height: inherit!important;}
}

это решит вопрос.

Примечание

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