[Решено] Съехали товары в категории

[lambda371]

Доброго времени суток, форумчане!
Столкнулся с небольшой проблемой
На странице категории очень странно отображаются товары
На одной строчке 3 товара, на другой 1
Как будто остаются пустые места
Что можно с этим сделать?

Прикрепляю ссылку на страницу категорий:
http://гидротех-центр37.рф/electro-dvigateli

[Ptenec]

11 минут назад, lambda371 сказал:

Доброго времени суток, форумчане!
Столкнулся с небольшой проблемой
На странице категории очень странно отображаются товары
На одной строчке 3 товара, на другой 1
Как будто остаются пустые места
Что можно с этим сделать?

Прикрепляю ссылку на страницу категорий:
http://гидротех-центр37.рф/electro-dvigateli

высоту блоков поставить
или названия товара 
 

#content .item-inner .product-name {

1. margin: 8px 0 0;
2. height: 40px;

}

Змінено 25 жовтня 2018 користувачем Ptenec

[wbDev]

Сделать фиксированную высоту названия товара или написать скрипт который будет делать это автоматически, вычисляя максимальную высоту. Тогда съезжать не будут

Первый же скрипт с гугла 

$(document).ready(function(){
    $.fn.equivalent = function (){
            //запишем значение jQuery выборки к которой будет применена эта функция в локальную переменную $blocks
        var $blocks = $(this),
            //примем за максимальную высоту - высоту первого блока в выборке и запишем ее в переменную maxH
            maxH    = $blocks.eq(0).height(); 

        //делаем сравнение высоты каждого блока с максимальной
        $blocks.each(function(){
            maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH;
            /*
            Этот блок можно записать так:
            if ( $(this).height() > maxH ) {
                maxH = $(this).height();
            }
            */
        });

        //устанавливаем найденное максимальное значение высоты для каждого блока jQuery выборки
        $blocks.height(maxH); 
    }

    //применяем нашу функцию в элементам jQuery выборки - $('.nav')
    $('.product-name').equivalent(); 
});

 

Змінено 25 жовтня 2018 користувачем wbDev

[wbDev]

15 минут назад, Ptenec сказал:

высоту блоков поставить
или названия товара 
 

#content .item-inner .product-name {

1. margin: 8px 0 0;
2. height: 40px;

}

Если так делать, то нужно выискивать самое длинное название на сайте и при этом в коротких названиях будет много пустого места, проще эту задачу решать через скрипт. Главное потом посмотреть как оно работает на телефонах, иногда криво отрабатывает

Змінено 25 жовтня 2018 користувачем wbDev

[SiteMix]

Что интересно, подобная проблема проблема поднимается чуть не каждый месяц и решение на форуме уже есть. Вот, например.

Но каждый раз кому-то лень искать...

[anboza]

13 минут назад, SiteMix сказал:

Но каждый раз кому-то лень искать..

поиск - это не для настоящих ковбоев 

[Гість]

Если название не особо играет большую роль, обрезайте и добавляйте три точки в конце. 

 

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

[lambda371]

Друзья, спасибо большое за ответ!
Решение нашел в сообщении @Landistore