Jump to content



Toggle %s Welcome to JBZoo community !

English: Please, sign in for contact JBZoo techsupport. Accesses in your Email, which came after the purchase.

Russian: Для того чтобы обратиться в русскую техническую поддержку JBZoo — авторизуйтесь с помощью доступов, которые пришли к вам в письме после покупки. Внимание! Доступ туда имеют только тарифы со знаком «плюс». Подписки JBZoo без "+" форум расценивает как забаненные, поэтому для общения в публичном разделе используйте отдельный аккаунт (легко зайти через социальную сеть). Если форум вас не пускает, почистите куки браузера


Photo
- - - - -

Проблема с отображением колонок материалов на телефоне


9 replies to this topic

#1 Владимир Виноградов

Владимир Виноградов

Posted 31 October 2017 - 13:41

Доброго дня!

Уже несколько часов копаюсь и не могу найти - где и что нужно изменить, чтобы колонки материалов при просмотре с мобильного телефона вместо трёх колонок, отображались в одну колонку. Что бы я ни делал, всё-равно минимум 2 колонки остаётся. Только третья перепрыгивает ниже...



#2 CB9TOIIIA

CB9TOIIIA
  • Administrators
  • User rate: 216.2
  • posts: 3107
  • topics: 226

Posted 31 October 2017 - 13:55

По сути это верстка по сетке (бутстрап,uikit) в teaser.php / full.php 


  • 0
b3sky9c.jpg Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru / 0_a5dfa_59170f8b_orig.png JBZoo чат (ninja) ¯\_(ツ)_/¯ / 0_a8adc_9b13e908_orig.png Разработка Joomla расширений и т.д.!
           Стать дедом морозом может каждый: Крутой подарок программисту (cb9toiiia[собака]gmail.com)   (party)
           P.S. Я не саппорт, а человек желающий помочь в решение Вашей проблемы. Саппорт и разработчик Smetdenis

#3 Владимир Виноградов

Владимир Виноградов
  • Topic Starter
  • Members
  • User rate: ~
  • posts: 9
  • topics: 2

Posted 31 October 2017 - 14:13

По сути это верстка по сетке (бутстрап,uikit) в teaser.php / full.php 

У меня всё в шаблоне "Catalog". Если перенести в бутстрап,uikit это поможет?



#4 CB9TOIIIA

CB9TOIIIA
  • Administrators
  • User rate: 216.2
  • posts: 3107
  • topics: 226

Posted 31 October 2017 - 15:56

Скорее нет, чем да. По уму все это CSS и вёрстка.
  • 0
b3sky9c.jpg Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru / 0_a5dfa_59170f8b_orig.png JBZoo чат (ninja) ¯\_(ツ)_/¯ / 0_a8adc_9b13e908_orig.png Разработка Joomla расширений и т.д.!
           Стать дедом морозом может каждый: Крутой подарок программисту (cb9toiiia[собака]gmail.com)   (party)
           P.S. Я не саппорт, а человек желающий помочь в решение Вашей проблемы. Саппорт и разработчик Smetdenis

#5 Владимир Виноградов

Владимир Виноградов
  • Topic Starter
  • Members
  • User rate: ~
  • posts: 9
  • topics: 2

Posted 31 October 2017 - 19:50

Скорее нет, чем да. По уму все это CSS и вёрстка.

В общем, проблема решена. Если у кого-нибудь возникнет похожая ситуация, то решается это так:

Найти, где задана ширина колонки было не просто, т.к. ширина вычисляется в файле column.less, и простой перебор файлов на наличие искомого текста нормального результата не дал. Вышел только файл из кэша. В принципе он тоже подойдёт, если не перекомпилировать LESS.

Собственно ширина колонок прописана в файле: media/zoo/applications/jbuniversal/assets/less/general/columns.less

Я не спец в CSS, и только догадывался что такое LESS. Но методом тыка я всё же смог переделать проценты на пиксели.

Вот так  выглядит стандартный файл:

@gridMax: 99.9%;
@gridMargin: 0.95%;

.jbgrid(@cols) {
    @width: (@gridMax - (@cols * @gridMargin)) / @cols;
    width: @width;
    margin: 0 @gridMargin @gridMargin 0;
    float: left;
    &.last {
        margin-right: 0;
        .clear();
    }
}

.jbzoo {

    .width100 {
        // width: 100%;
        margin: 0 0 @gridMargin 0;
    }

    .width50 { .jbgrid(2);}
    .width33 { .jbgrid(3);}
    .width25 { .jbgrid(4);}
    .width20 { .jbgrid(5);}
    .width16 { .jbgrid(6);}
    .width14 { .jbgrid(7);}
    .width12 { .jbgrid(8);}

А вот как я его переделал под свои нужды:

@gridMax: 1248px;
@gridMargin: 14px;

.jbgrid(@cols) {
    @width: (@gridMax - (@cols * @gridMargin)) / @cols;
    max-width: @width;
	min-width: 200px;
    margin: 0 @gridMargin @gridMargin 0;
    float: left;
    &.last {
        margin-right: 0;
        .clear();
    }
}

.jbzoo {

    .width100 {
        // width: 1248px;
        margin: 0 0 @gridMargin 0;
    }

    .width50 { .jbgrid(2);}
    .width33 { .jbgrid(3);}
    .width25 { .jbgrid(4);}
    .width20 { .jbgrid(5);}
    .width16 { .jbgrid(6);}
    .width14 { .jbgrid(7);}
    .width12 { .jbgrid(8);}
}

Возможно, это не совсем правильное решение. Но оно работает)



#6 mmth

mmth
  • JBZoo User (rus)
  • User rate: 11.4
  • posts: 255
  • topics: 5

Posted 31 October 2017 - 20:01

В общем, проблема решена. Если у кого-нибудь возникнет похожая ситуация, то решается это так:

Найти, где задана ширина колонки было не просто, т.к. ширина вычисляется в файле column.less, и простой перебор файлов на наличие искомого текста нормального результата не дал. Вышел только файл из кэша. В принципе он тоже подойдёт, если не перекомпилировать LESS.

Собственно ширина колонок прописана в файле: media/zoo/applications/jbuniversal/assets/less/general/columns.less

Я не спец в CSS, и только догадывался что такое LESS. Но методом тыка я всё же смог переделать проценты на пиксели.

Вот так  выглядит стандартный файл:

@gridMax: 99.9%;
@gridMargin: 0.95%;

.jbgrid(@cols) {
    @width: (@gridMax - (@cols * @gridMargin)) / @cols;
    width: @width;
    margin: 0 @gridMargin @gridMargin 0;
    float: left;
    &.last {
        margin-right: 0;
        .clear();
    }
}

.jbzoo {

    .width100 {
        // width: 100%;
        margin: 0 0 @gridMargin 0;
    }

    .width50 { .jbgrid(2);}
    .width33 { .jbgrid(3);}
    .width25 { .jbgrid(4);}
    .width20 { .jbgrid(5);}
    .width16 { .jbgrid(6);}
    .width14 { .jbgrid(7);}
    .width12 { .jbgrid(8);}

А вот как я его переделал под свои нужды:

@gridMax: 1248px;
@gridMargin: 14px;

.jbgrid(@cols) {
    @width: (@gridMax - (@cols * @gridMargin)) / @cols;
    max-width: @width;
	min-width: 200px;
    margin: 0 @gridMargin @gridMargin 0;
    float: left;
    &.last {
        margin-right: 0;
        .clear();
    }
}

.jbzoo {

    .width100 {
        // width: 1248px;
        margin: 0 0 @gridMargin 0;
    }

    .width50 { .jbgrid(2);}
    .width33 { .jbgrid(3);}
    .width25 { .jbgrid(4);}
    .width20 { .jbgrid(5);}
    .width16 { .jbgrid(6);}
    .width14 { .jbgrid(7);}
    .width12 { .jbgrid(8);}
}

Возможно, это не совсем правильное решение. Но оно работает)

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


  • 0

#7 Владимир Виноградов

Владимир Виноградов
  • Topic Starter
  • Members
  • User rate: ~
  • posts: 9
  • topics: 2

Posted 31 October 2017 - 21:02

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

В том то и дело, что с процентами, почему-то, колонки отображались неправильно. Как я и говорил, из трёх колонок только одна переносилась, а остальные две мёртво стояли рядом друг с другом. При этом на телефоне получалось наложение одной колонки на другую. Соответственно читаемость была равна нулю. Здесь же заданы максимальные и минимальные значения ширины. При этом всё отображается хорошо. Как на большом экране, так и на мобильном телефоне. Если у вас есть другой способ - я готов его выслушать.



#8 Владимир Виноградов

Владимир Виноградов
  • Topic Starter
  • Members
  • User rate: ~
  • posts: 9
  • topics: 2

Posted 31 October 2017 - 21:16

Получилось сохранить проценты. Нужно просто добавить после:

width: @width;

строчку

min-width: 200px;

Теперь и с процентами всё работает.



#9 mmth

mmth
  • JBZoo User (rus)
  • User rate: 11.4
  • posts: 255
  • topics: 5

Posted 31 October 2017 - 22:01

Получилось сохранить проценты. Нужно просто добавить после:

width: @width;

строчку

min-width: 200px;

Теперь и с процентами всё работает.

ваш случай полностью не вижу, но в css есть @media(условие обычно смотрит ширину)

это позволяет влиять на конечном устройстве (смартфоне), на отображение сетки. Для примера очень хорошо подходит bootsptrap с .col-md-XX, .col-xs-XX, .col-lg-XX, эти классы как раз и позволяют вместе с @media влиять на конкретные размеры экранов. 


  • 0

#10 Владимир Виноградов

Владимир Виноградов
  • Topic Starter
  • Members
  • User rate: ~
  • posts: 9
  • topics: 2

Posted 01 November 2017 - 08:27

ваш случай полностью не вижу, но в css есть @media(условие обычно смотрит ширину)

это позволяет влиять на конечном устройстве (смартфоне), на отображение сетки. Для примера очень хорошо подходит bootsptrap с .col-md-XX, .col-xs-XX, .col-lg-XX, эти классы как раз и позволяют вместе с @media влиять на конкретные размеры экранов. 

У меня уже всё в шаблоне "Catalog". Если буду работать с шаблоном "Bootstrap", обязательно гляну эти классы. А так, познания в CSS у меня не полные, поэтому исхожу из того, что знаю.  :)






Click to return to top of page in style!