Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

 

Screenshot_1.png.376855f93ffc4020ad2e403991204f1e.png

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

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

123.PNG

Link to post
Share on other sites

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

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

 

Link to post
Share on other sites

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

Edited by freeyourmind2
Link to post
Share on other sites

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%

 

Снимок экрана от 2017-11-18 14-58-19.png

Снимок экрана от 2017-11-18 14-58-41.png

Link to post
Share on other sites

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

 

.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.

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

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

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

 

 

Edited by jaffagold
Link to post
Share on other sites

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

 

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

Edited by florapraktik
Link to post
Share on other sites

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

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

 

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

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

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

Edited by freeyourmind2
Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

Так, Да.

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

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

Link to post
Share on other sites

 

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

Так, Да.

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

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

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

 

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

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

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

  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+ */

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.