Модуль Категории (IMG)

[serg570]

как настроить вывод  5 категорий в ряд всместо 4 в Категории (IMG)  

[WarStyle]

20 минут назад, serg570 сказал:

как настроить вывод  5 категорий в ряд всместо 4 в Категории (IMG)  

 

Дайте линк =)

[serg570]

4 минуты назад, WarStyle сказал:

 

Дайте линк =)

http://winsoft.ru

[WarStyle]

12 минуты назад, serg570 сказал:

http://winsoft.ru

 

Для начала верните назад нормальный размер блока, а потом сделайте меньше сами блоки категории IMG: http://joxi.ru/823k3jKSJzdxb2, вместо 

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

Нужно сделать вот так:

<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">

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

[serg570]

4 часа назад, WarStyle сказал:

 

Для начала

Спасибо . а как его отцентровать ?   а не с левого края  

вот код

Скрытый текст

<h3 class="module-title"><span><?php echo $heading_title; ?></span></h3>
<div class="row imgcategory">
    <?php foreach ($categories as $category) { ?>
        <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
            <div class="product-thumb transition">
                <div class="image"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>" title="<?php echo $category['name']; ?>" alt="<?php echo $category['name']; ?>"/></a></div>
                <h4><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></h4>
            </div>
        </div>
    <?php } ?>
</div>

 

Изменено February 3, 2017 пользователем RHCk
Картинки и код убирайте под спойлер!

[Blade]

у вас там (если правильно понял есть) проблемка

@media (min-width: 1200px)

bootstrap.min.css:5

.col-lg-2 {

width: 20%;

}

 

сейчас стоит 16,6% 

 

и с этим 

@media (min-width: 992px)

bootstrap.min.css:5

.col-md-3 {

width: 20%;

}

 

сейчас стоит 25%

 

потом надо проверить чтОБы в других стилях не слетело или обернуть в отдельный с этими значениями

Либо переопределить в стилях, либо попробовать изменить сами значения col-lg-2  col-md-3

 

в .imgcategory я бы добавил  text-align: center

 

и мысли свои)  на малом экране делится все на два столбца.Что бы было красиво, надо четное число блоков

 

типа так надо ?

Скрытый текст

 

 

[jaffagold]

Перед всеми изменениями делаете Бэкап файлов для отката.

 

За отображение карточки в строке отвечают такие блоки

Скрытый текст

div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"

На полном экране за отображение этого модуля отвечает код

Скрытый текст

@media (min-width: 1200px)

bootstrap.min.css:5

.col-lg-2 {

1. width:   16.66666667%; }

Расшифрую:

большой экран=large screen = lg

lg-2 означает, что блок займет на больших экранах 2 колонки в сетке из двенадцати возможных (смотреть: сетка Bootstrap)

2 делить на 12 = 1/6= 16.66666667%;

 

А вам надо 20%  

Прописываете в html (.tpl вашего модуля)

Скрытый текст

div class="col-lg-15 col-md-3 col-sm-6 col-xs-12"

Прописываете в css

Скрытый текст

@media (min-width: 1200px)

bootstrap.min.css:5

.col-lg-15 {

1. width:   20%; }

Тогда на больших экранах выстроится 5 элементов в ряд.

Теперь надо думать, как должны вести себя себя эти блоки при сужении экрана.

Можно аналогичным образом прописать класс md-15 И стили для него, но уже медиазапрос будет другой. 

 

При дальнейшем сужении можно применить оформление в стиле "олимпийские кольца" и использовать стандартные стили bootstrap

Задать для первых трех элементов

Скрытый текст

col-sm-4 col-xs-4

и для последних двух

Скрытый текст

col-sm-6 col-xs-6

получим 3 в первом ряду и 2 во втором.

но разные по размеру.

 

Чтобы сделать одинаковые, надо сделать иначе. Зарезервировать "пробелы" между блоками.

12=блок4-блок4- блок4 ( 4+4+4=12)

на второй строке

12=пробел1-блок4-пробел2-блок4-пробел1 (1+4+2+4+1=12)

Для картинок добавить стиль img-responsive ( если его нет)

Но главная сложность в том, что надо будет еще прикрутить перебор с 1 до 5, чтобы на 1-2-3 прописывалась одна разметка, а на 4-5 другая.