Вывод товаров в поиске

[ivansopin]

Друзья, подскажите, что делать!

Всё излазил, ничего не понимаю. Всегда одинаково отображаются товары в поиске, но не в ровные колонки.

 

 

 

http://vunderkind18.ru  сайт, вдруг кому то нужно будет

Змінено 22 липня 2017 користувачем ivansopin

[AlexDW]

здесь обсуждалось

[jaffagold]

Похоже, там причина другая.

Возьмем такую страницу

http://vunderkind18.ru/index.php?route=product/search&search=велосипед

видим вот что

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

Блок съезжает из-за назначенного ему стиля clear: left;

Там вообще получается накладка из двух способов формирования сетки класса clearfix у разделительных блоков и стиля clear: left; у карточек переноса строки. 

Дело в том, что блоки div.clearfix тоже считаются в псевдоклассе :nth-child(4n+1)

На поверхности лежит решение- убрать из разметки div.clearfix

В этом случае не будет работать выравнивание следующего ряда по верхней кромке и возможно западание карточек товара за карточки верхнего ряда ( как раз такая проблема описана по ссылке вверху)

Отмена стиля clear:left тоже вызывает определенные негативные эффекты.

Из-за массовых float:left там куча всего вышло из потока и первая карточка товара цепляется за содержимое предыдущего блока.

Вроде неплохо сработало изменение класса

#content .col-lg-3:nth-child(1) ( это кажется готовым рабочим решением, но надо будет внести правки во все аналогичные стили)

вместо #content .col-lg-3:nth-child(4n+1)

Проверять на всех разрешениях и для всех сеток сейчас не могу.

Но, надеюсь, идеи понятны.

Что-то типа этого, но для всех медиазапросов:

stylesheet.css:694

 

@media (min-width: 1200px){

  #content .col-lg-2:nth-child(1),

  #content .col-lg-2:nth-child(1),

  #content .col-lg-3:nth-child(1),

   #content .col-lg-4:nth-child(1),

  #content .col-lg-6:nth-child(1) {

     clear: left;

  }

}

 

 

 

Змінено 22 липня 2017 користувачем jaffagold

[ivansopin]

Спасибо, теперь всё хорошо. На чём это может еще сказаться? Если честно вообще не понимаю эту структуру )))