Как выравнить цену

[susha]

Извините за глупый вопрос, но не могу выравнить цену на главной в модуле рекомендуемые. В css сделал цену жирной и выровнил по центру. А вот вертикальное выравнивание не получается. Хотелось бы, что бы цена была на одной высоте от кнопки "В корзину". vertical-align: bottom;  в данном случае не работает.

 

[todaymars]

Или min-height названию пропишите, или через позиционирование.

[susha]

Только что, todaymars сказал:

Или min-height названию пропишите, или через позиционирование.

 

А можно подробнее?

[todaymars]

Скиньте ссылку в личку

[iura93]

Помогите пожалуйста решить эту проблему!! Как сделать чтобы все окна были одного размера в независимости от того если есть описание товара или нет. Спасибо огромное за ранее!!!

[freeyourmind2]

Для родительского блока можно прописать 

  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;        
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

 

[iura93]

Мне лично не помогло.Но спасибо за ответ

[freeyourmind2]

Киньте ссылку.Думаю можно разобраться будет. Если есть <div class="product-thumb"> пробуйте для него прописать height:100%    

Змінено 15 листопада 2017 користувачем freeyourmind2

[iura93]

http://robinet.md/ добавил но всё равно не помогло(

[freeyourmind2]

2 часа назад, iura93 сказал:

http://robinet.md/ добавил но всё равно не помогло(

https://prnt.sc/hc23on   

Для class="row" добавляем 

 display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;        
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

а для product-thumb

height:100%

 

[jaffagold]

Грубое, но рабочее решение:

 

.caption h4 {

    height: 75px;

}

 

.caption > p:nth-of-type(1) {

    height: 145px;

}

Но надо проверить вывод товаров на разных страницах сайта,  при различных разрешениях экрана. Также при разном отображении (Сетка/Лист)

Скорее всего, придется чуть подправить.

Также надо будет посмотреть на разных разрешениях экрана. 

Возможно придется дополнить стилями с медиазапросами.

 

нет, не так...

У вас Товары в Категориях правильно отображаются

Просто задайте для модулей АНАЛОГИЧНУЮ разметку ( широкие блоки вместо узких) с учетом левого бокового меню, вам класс col-lg-3 не подходит- сильно зауживает блоки товаров в модулях

если их поменять на col-lg-4 col-md-4

Все станет как надо

<div class="product-layout col-lg-4 col-md-4 col-sm-6 col-xs-12"> ( это можно попробовать в Инспекторе кода, для трех соседних блоков.

Сразу станет хорошо.

Но это при условии, что модули выводятся только на Главной. И при наличии бокового меню.

 

Как вариант, можно просто переписать стили для 

 

 .common-home .product-layout.col-lg-3 {

     width:33.33333333% !important; 

}

и

@media (max-width: 992px) {

    .common-home .product-layout.col-md-3 { 

        width:33.33333333% !important;

    }

}

Этот вариант самый быстрый по применению

НО придется еще поразбираться со стилем

@media (min-width: 1200px)

stylesheet.css:718

#content .col-lg-2:nth-child(6n+1), #content .col-lg-2:nth-child(6n+1), #content .col-lg-3:nth-child(4n+1), #content .col-lg-4:nth-child(3n+1), #content .col-lg-6:nth-child(2n+1) {

/* clear: left; */

}

и

@media (max-width: 1199px) and (min-width: 992px)

stylesheet.css:727

#content .col-md-2:nth-child(6n+1), #content .col-md-2:nth-child(6n+1), #content .col-md-3:nth-child(4n+1), #content .col-md-4:nth-child(3n+1), #content .col-md-6:nth-child(2n+1) {

/* clear: left; */

}

Он как-бы делает перенос блоков на следующую строку и борется с "цеплянием" блоков друг за друга. А цепляются они только при разной высоте.

НО внешний вид блоков с разной высотой все-равно - некрасивый, поэтому, мне кажется проще выровнять высоты блоков стилями или скриптом.

А это стиль отменить.

 

Или не меняя разметку в Схемах уберите Меню категорий из Левой части

Можете просто в инспекторе кода правой кнопкой кликнуть на aside и нажать Delete элемент.

А потом для блока контента пропишите col-sm-12

Ну, красота же ???

Зачем вам это боковое меню?

 

Другой вариант:

Есть скрипт выравнивания высоты блоков по максимальному. Используется в бесплатном  шаблоне FastFood. Можете оттуда его вытащить.

 

P.S. 

Зачем у вас в описании товара полностью повторяется его название причем большими буквами?

Это- дурной тон.

ПРОВОДНОЙ КОНТРОЛЛЕР ТЕРМОСТАТИЧЕСКИХ КЛАПАНОВ (8 СЕКЦИЙ)

 

P.P.S.

Если описаний ко многим товарам не будет, то будет много пустот в мини-карточках товаров в Категориях.

Как вариант, можно переверстать так, чтобы описание показывалось при наведении. Как характеристики на "Розетке"

А вывод описания в модулях, как мне кажется надо вообще отключить.

 

 

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

[florapraktik]

Для <div class="row" > ничего добавлять не надо - ищите другое решение.

 

Например, уберите описание везде. Просто вырезать из шаблона. А зачем оно там?

Змінено 18 листопада 2017 користувачем florapraktik

[freeyourmind2]

43 минуты назад, florapraktik сказал:

Для <div class="row" > ничего добавлять не надо - ищите другое решение.

 

Например, уберите описание везде. Просто вырезать из шаблона. А зачем оно там?

Почему ? Можно добавить туда например класс flex-row и для него применить стили. Flex поддерживается современными браузерами.) 

Есть хорошая статья про кроссбраузерность . https://css-tricks.com/using-flexbox/ .

Змінено 18 листопада 2017 користувачем freeyourmind2

[jaffagold]

.row Не надо трогать. Это ничего не дает.

По крайне мере 3 способа описано выше.

[florapraktik]

2 минуты назад, freeyourmind2 сказал:

 Можно добавить туда например класс flex-row и для него применить стили.

Так, Да.

Я хотел сказать, что не надо переопределять поведение самого класса row.

Ну, я Вас так понял почему-то.

[freeyourmind2]

 

6 минут назад, florapraktik сказал:

Так, Да.

Я хотел сказать, что не надо переопределять поведение самого класса row.

Ну, я Вас так понял почему-то.

Ну это да .  Подумал что не  переопределять класс .row это понятно  )

 

10 минут назад, jaffagold сказал:

.row Не надо трогать. Это ничего не дает.

По крайне мере 3 способа описано выше.

https://prnt.sc/hc23on    На скрине видно что карточки ровные.   

[jaffagold]

Если модификатором добавить у всех модулей  доп класс для div.row, например div class="row row-flex"

И писать стили для него. То тогда- да. 

Что говорит статистика? Какой процент пользователей не увидит красоту?

[freeyourmind2]

Тут вот такая статистика.

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

Вроде как бы неплохо )

[iura93]

Спасибо вам большое!!! Я новичок полный по этому поводу так что буду разбираться с полученной инфой. Счастья и здоровья вам и вашим близким!!!