Сообщений в теме: 9

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

Доброго дня!

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

[CB9TOIIIA]

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

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

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

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

[CB9TOIIIA]

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

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

Скорее нет, чем да. По уму все это 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);}
}

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

[mmth]

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

Найти, где задана ширина колонки было не просто, т.к. ширина вычисляется в файле 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);}
}

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

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

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

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

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

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

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

width: @width;

строчку

min-width: 200px;

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

[mmth]

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

width: @width;

строчку

min-width: 200px;

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

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

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

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

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

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

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