Выравнивание карточек товаров.

[Teamk]

Ребята, привет всем. Подскажите, как сдеать карточки товаров ровными?

Используется Joomla.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Denis_Pi]

Ребята, привет всем. Подскажите, как сдеать карточки товаров ровными?
Используется Joomla.

в @media screen

.latest-view .spacer, .topten-view .spacer, .recent-view .spacer, .featured-view .spacer, .vmproduct.productdetails .spacer, .browse-view .spacer {
text-align: center;
padding: 20px;
height: 310px;
}

.category-view .row-fluid .category img, .row-fluid .spacer img {
-webkit-backface-visibility: hidden;
max-height: 125px;
}

.pr-img-handler {
position: relative;
width: 100%;
height: 175px;
}

ниже всех @media screen ...

.button, button, a.button, dt.tabs.closed:hover, dt.tabs.closed:hover h3 a, .closemenu, .vmproduct.productdetails .spacer:hover .pr-add, .vmproduct.productdetails .spacer:hover .pr-add-bottom, a.product-details:hover, input.addtocart-button, a.ask-a-question, .highlight-button, .vm-button-correct, span.quantity-controls input.quantity-plus, span.quantity-controls input.quantity-minus, .cartpanel span.closecart, .vm-pagination ul li a, #LoginForm .btn-group>.dropdown-menu, #LoginForm .btn-group>.dropdown-menu a, .popout-price, .popout-price .PricesalesPrice {
color: #fff !important;
background-color: #e36060 !important;
margin-top: 15px;
}

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

на выходе Для просмотра ссылки Войди или Зарегистрируйся

 

[Teamk]

в @media screen

.latest-view .spacer, .topten-view .spacer, .recent-view .spacer, .featured-view .spacer, .vmproduct.productdetails .spacer, .browse-view .spacer {
text-align: center;
padding: 20px;
height: 310px;
}

.category-view .row-fluid .category img, .row-fluid .spacer img {
-webkit-backface-visibility: hidden;
max-height: 125px;
}

.pr-img-handler {
position: relative;
width: 100%;
height: 175px;
}

ниже всех @media screen ...

.button, button, a.button, dt.tabs.closed:hover, dt.tabs.closed:hover h3 a, .closemenu, .vmproduct.productdetails .spacer:hover .pr-add, .vmproduct.productdetails .spacer:hover .pr-add-bottom, a.product-details:hover, input.addtocart-button, a.ask-a-question, .highlight-button, .vm-button-correct, span.quantity-controls input.quantity-plus, span.quantity-controls input.quantity-minus, .cartpanel span.closecart, .vm-pagination ul li a, #LoginForm .btn-group>.dropdown-menu, #LoginForm .btn-group>.dropdown-menu a, .popout-price, .popout-price .PricesalesPrice {
color: #fff !important;
background-color: #e36060 !important;
margin-top: 15px;
}

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

на выходе Для просмотра ссылки Войди или Зарегистрируйся

Я понял, что это @media screen, но в CSS шаблона вообще этих строк нет. В каких файлах их искать?
Наверное проблема в том, что у меня стоит JCH Optimize, поэтому я не могу их найти через браузер.
Сейчас буду рыть...


Все получилось на главной, за это спасибо большое, но все поехало на страницах категорий.
И когда я включаю JCH Optimize, то начинается снова здорова...

 

[mdss]

Мой колхоз. Добавляем в стили

.pr-img-handler a {height:170px;line-height:170px;}
.pr-img-handler img {max-width:100%;max-height:170px;vertical-align:middle;}
.popout-price {margin-top:10px;}

Скрин результата во вложении.

А вообще для таких случаев (когда высота блока с фоткой известна) Сергей Чикуенок помог сделать красиво и модно:
Для просмотра ссылки Войди или Зарегистрируйся

 

[ITeshnik]

У меня есть скрипт на джеквери.
Он определяет максимальную высоту картинки и делает высоту блока по всем товарам.
яваскрипт решение подойдёт?

 

[Teamk]

У меня есть скрипт на джеквери.
Он определяет максимальную высоту картинки и делает высоту блока по всем товарам.
яваскрипт решение подойдёт?

Конечно делись. Пригодится!
mdss - благодарю- твой код сразу исправил все на всех страницах. Рекомендую.
Вставил в первый попавшийся CSS файл... Может попал, а может разницы нет, но все заработало!

 

[ITeshnik]

Тут фикситься высота товара, заголовка и картинки

// catalog tovar height fix
tovarHeightFix();
function tovarHeightFix(){
    var tovar = $(".catalog .tovar");
    var tovarImg = $(".catalog .tovar .img");
    var tovarH2= $(".catalog .tovar h2");
    var maxHeightTov = $(".catalog .tovar").height();
    var maxHeightImg = $(".catalog .tovar .img").height();
    var maxHeightH2 = $(".catalog .tovar h2").height();
    tovarLength = tovar.length;
   
   
    $(window).load(function(){
                                for (i=0;i<tovarLength;i++){
                                    tovHeightImg = tovarImg[i];
                                    tovHeightImg = $(tovHeightImg).height();
                                    if (maxHeightImg<tovHeightImg){
                                        maxHeightImg=tovHeightImg;
                                    }
                                }
                                $(".catalog .tovar .img").height(maxHeightImg);
                                for (i=0;i<tovarLength;i++){
                                    tovHeightH2 = tovarH2[i];
                                    tovHeightH2 = $(tovHeightH2).height();
                                    if (maxHeightH2<tovHeightH2){
                                        maxHeightH2=tovHeightH2;
                                    }
                                }
                                $(".catalog .tovar h2").height(maxHeightH2);
                               
                                for (i=0;i<tovarLength;i++){
                                    tovHeight = tovar[i];
                                    tovHeight = $(tovHeight).height();
                                    if (maxHeightTov<tovHeight){
                                        maxHeightTov=tovHeight;
                                    }
                                }
                                $(".catalog .tovar").height(maxHeightTov);
                                //img{vertical-align:middle;}
                                for (i=0;i<tovarLength;i++){
                                    tovImg = $(".catalog .tovar .img img:not(.catalog .tovar .img .sale img)")[i];
                                    tovImgHeight = $(tovImg).height();
                                    imgMarginTop = maxHeightImg - tovImgHeight;
                                    $(tovarH2[i]).css({paddingTop:imgMarginTop})
                                   
                                }
                            });
    };