Сетка 2Х товаров в мобильной версии

[Vadim]

Добрый день!  Подскажите как в шаблоне GENTLE сделать вывод товаров сеткой в мобильной версии - 2 колонки в ряду. Т.е. покупатель видит изображение наименование и цену.

Вот как на рисунке. В Фотошопе это легко  А как это сделать в Opencart`e. Где править, куда смотреть? Помогите! 

[Blade]

del

брал со своих стилей, правильно ниже

[Vadim]

А можно подробнее пожалуйста.

т.е берем файл stylesheet и добавляем в этот код :

 

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

    #column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

    #column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}
 

Если не сложно помогите пожалуйста.

[Blade]

5 часов назад, Vadim сказал:

А можно подробнее пожалуйста.

т.е берем файл stylesheet и добавляем в этот код :

 

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

    #column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

    #column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}
 

Если не сложно помогите пожалуйста.

смотрите, судя по демо разбивка на 2 колонки идет после 768 точек

вы хотите чтОБы было 2 при меньшем ?

от какого тогда ? или от 0 ?

 

у вас в бутстрапе стоит

@media (min-width: 768px)

.col-sm-6 {

width: 50%;

}

 

поставьте в stylesheet

@media (min-width: 486px)

.col-sm-6 {

width: 50%;

}

 

если еще меньше то плывет, можно убрать или сократить краткое описание, тогда можно еще меньше сделать

 

[Vadim]

7 часов назад, spown сказал:

@media (min-width: 486px)

.col-sm-6 {

width: 50%;

}

 

Что-то не получилось.

Я хочу оставить картинку, название, цену и кнопки. 

Хочу сделать чтобы от 990 до 486 были изображения в две колонки

                                   от 486 до 0  - одна колонка 

Вот родной  stylesheet  из темы Gentle. Там как-то по другому немного. Видел статью где правят в common.js    Может нужно и там и там делать изменения? 

stylesheet.css

[Vadim]

Оказалось все намного проще.

Кому интересно: 

в  common.js  поменял sm-12 на sm-6  и xs-12 на xs-6 . Поменял в Notepd++ через поиск и заменть все. Больше ничего не трогал. Поменялось на страницах категорий, новинки и т.д. не затронуло. Еще проверять буду, но пока все ОК.

 

[Blade]

зачем лезть в common.js ?

дело ваше конечно.проще было строку в стили внести.в любой момент удалил и все