Перейти к содержимому


Фотография
- - - - -

Вид каталога на мобильных или при уменьшении окна браузера


Лучший Ответ polyakov2004 , 26 February 2013 - 23:12

спасибо разобрался
вот решение-думаю можно добавить в общую "инструкцию к выводу материалов в тизере"
выбираем в настройках шаблона на главной нужное кол-во колонок например 6
добавляем в ccs jbzoo

@media (min-width: 0px) and (max-width: 479px) {
.jbzoo .width16 {
    width: 49%;
    float: left;
}
}
@media (min-width: 480px) and (max-width: 1024px) {
jbzoo .width16{
    width: 32%;
    float: left;
}
}

@media (min-width: 1025px) and (max-width: 1920px) {
.jbzoo .width16{
    width: 23.8%;
    float: left;
}
}
где
@media (min-width: 1025px) and (max-width: 1920px) - нужное разрешение от до.
.jbzoo .width16 - количество колонок которое изначально выбрали 6.
width: 23.8% - размер материала (количество колонок 23,8%-4 колонки) при заданном разрешении.
Sliapy - огромное спасибо. Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 14

#1 polyakov2004

polyakov2004

Отправлено 25 February 2013 - 20:08

подскажите пожалуйста как сделать так чтобы при уменьшении окна браузера категории и похожие материалы на главной и в категориях становились одна под другую. в родном каталоге zoo это реализовано вот пример:
http://www.yootheme....rranged-catalog

как сделать также в jbzoo&
  • 0

#2 RomanL

RomanL

Отправлено 25 February 2013 - 20:39

Это реализовано не в каталоге, а в адаптивном шаблоне от yootheme.

Как сделать:
- купить шаблон от yootheme
- самому сделать адаптивный шаблон
  • 0
[color=#aa0000]Не забывайте нажимать кнопку «Вопрос Решён» и «+1» под сообщением, которое Вам помогло[/color]

#3 polyakov2004

polyakov2004

Отправлено 25 February 2013 - 20:44

установил квик старт этого шаблона а jbzoo себя также ведет( при уменьшения размера окна не опускает материалы вниз), а все остальное нормально "адаптивно" ?
  • 0

#4 RomanL

RomanL

Отправлено 25 February 2013 - 21:08

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

  • 0
[color=#aa0000]Не забывайте нажимать кнопку «Вопрос Решён» и «+1» под сообщением, которое Вам помогло[/color]

#5 polyakov2004

polyakov2004

Отправлено 25 February 2013 - 21:12

Данная функция была бы полезна в стандартной сборке jbzoo.
  • 0

#6 polyakov2004

polyakov2004

Отправлено 25 February 2013 - 21:14

Если возможно, подскажите, что искать?
  • 0

#7 RomanL

RomanL

Отправлено 25 February 2013 - 21:29

Открываете FireBugом демо шаблона с ZOO и смотрите какие используются стили для нормального размера и адаптации
  • 0
[color=#aa0000]Не забывайте нажимать кнопку «Вопрос Решён» и «+1» под сообщением, которое Вам помогло[/color]

#8 polyakov2004

polyakov2004

Отправлено 26 February 2013 - 12:20

стиль определил. для стандартного модуля joomla адаптация удалась с помощью стиля "float: left ", а вот в jbzoo никак не могу применить  "float: left " для материалов на главной?
http://more.vmorskom.com/
  • 0

#9 polyakov2004

polyakov2004

Отправлено 26 February 2013 - 12:32

понял что мешает это напрямую связано с классом jbzoo:
пример в
.jbzoo .width50 {
    float: left;
убираем    width: 49%; и все работает при уменьшении размера окна,
но тогда материалы становятся только в одну колонку, как это исправить?
  • 0

#10 Sliapy

Sliapy

Отправлено 26 February 2013 - 12:42

Если вы о том, чтобы в строку было не 2, а более элементов, если это позволяет ширина экрана, то все немного сложнее.

Т.к. в Zoo кол-во материалов в строке задается в настройках, их ширина задается стилями (width25 - ширина примерно 25%, соотв-но, 4 элемента в строку). Плюс после указанного в настройках кол-ва элементов выводится 
<div class="clear clr"></div>
который "перенорсит" следующий товар на новую строку.

Вам нужно сделать примерно следующее:

Как Вы уже сами поняли, нужно копать в сторону width50. Задайте здесь фиксированную ширину, например, 200px. Плюс у каждого последнего элемента строки убирается правый отступ
.jbzoo .subcategories .column.last, .jbzoo .related-items .column.last, .jbzoo .items .column.last {
    margin-right: 0;
}
Это тожно нужно убрать.

В общем, нужно играть со стилями, смотреть, что подойдет лучше.

Ну, и в шаблоне категории (скорее всего, для Вас это \media\zoo\applications\jbuniversal\templates\catalog\renderer\category\_default.php) найдите этот самый
<div class="clear clr"></div>
и удалите. Тогда товары не будут "насильно" разбиваться на несколько рядов.

Не забывайте про бэкапы.

  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]




Click to return to top of page in style!