Всем привет!
По мотивам моего вопроса об адаптивном дизайне для колонок, тут, и пишу этот рецепт.
Рецепт индивидуальный, кому-то нужен, кому-то нет, решайте сами.
И так, к сути.
Если на Вашем сайте вывод подкатегорий и товаров в категориях осуществляется в 4 колонки, то на малых разрешениях экрана (уже при ширине 1024px) у старых мониторов и планшетов можно наблюдать такую неприятную картину.
Был вариант от Cheren-dow, но там все сводилось к выводу в 1 колонку.
И так, что-бы вывод товаров и подкатегорий постепенно адаптировался в меньшее число колонок нужно:
1. Правим CSS.
В файле jbzoo.css по адресу
/public_html/media/zoo/applications/jbuniversal/assets/css
находим строки
.jbzoo .width50 {
width: 49%;
float: left;
}
.jbzoo .width33 {
width: 32%;
float: left;
}
.jbzoo .width25 {
width: 23.8%;
float: left;
}
.jbzoo .width20 {
width: 19%;
float: left;
}
.jbzoo .width16 {
width: 15.7%;
float: left;
}
и удаляем в каждой из них параметр float: left; .
Далее, в этом же css находим строку
.jbzoo .subcategories .column,
.jbzoo .related-items .column,
.jbzoo .items .column {
margin-right: 1%;
margin-bottom: 1em;
}
и добавляем в ней 2 свойства: display: inline-block; и vertical-align:top;
Далее пишем в css свойства @media. Пишем их в самом низу файла jbzoo.css
@media (min-width: 1280px) {
.jbzoo .width25 {
width:24.2%;
}}
@media (min-width: 1024px) and (max-width: 1279px) {
.jbzoo .width25 {
width:32.3%;
}}
@media (min-width: 768px) and (max-width: 1023px) {
.jbzoo .width25 {
width:49%;
}}
Подбор ширины колонок это дело сугубо индивидуальное, у кого какой сайт, дизайн, вкус, зрение. Делать это проще всего через Firebug и при этом изменяя разрешение экрана.
Тут в @media задаем для какого разрешения экрана будут задействованы наши свойства. На пример для экранов с шириной от 1280px и выше будет 4 колонки (min-width: 1280px), для ширины от 1024px до 1279px будет 3 колонки и т.д.
Класс .jbzoo .width25 это класс ваших колонок в зависимости от настроек. Определить его можно так (показано на рисунке).
Ширина width:32.3%; задается нашим блокам в указанном диапазоне ширины экрана и заставляет блоки растягиваться и занимать по 32.3% отведенного пространства ширины, тем самым выстраиваться в 3 колонки, а не 4.
2. И напоследок можно удалить некоторые лишние элементы:
Находим 2 файла. Название _default.php
Адрес 1
/media/zoo/applications/jbuniversal/templates/catalog/renderer/item_columns
Адрес 2
/media/zoo/applications/jbuniversal/templates/catalog/renderer/subcategory_columns
Открываем, находим код
if ($isLast) {
echo '<div class="clear clr"></div>';
}
и удаляем его
foreach ($vars['objects'] as $object) {
$first = ($j == 0) ? ' first' : '';
$last = ($j == $count - 1) ? ' last' : '';
$j++;
$isLast = $j % $vars['cols_num'] == 0 && $vars['cols_order'] == 0;
if ($isLast) {
$last .= ' last';
}
echo '<div class="column rborder width' . intval(100 / $vars['cols_num']) . $first . $last . '">' . $object
. '</div>';
if ($isLast) {
echo '<div class="clear clr"></div>';
}
}
Ну собственно и все. Себе настрою ещё и на 5 колонок дизайн, как доберусь до Full HD монитора )
Буду рад, если кому-то поможет. Спасибо за внимание.
P.S. Этот рецепт не сделает Ваш дизайн полностью адаптивным, но поможет убрать некоторые простые косяки.
Вопрос решен
