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

Изменить размер карточки товара


Recommended Posts

Всем хорошего и бодрого дня/вечера/ночи!

Уже очень много времени, набегами пытаюсь решить очень странную проблему.

product-layout он же родитель карточки товара, обычно выставляется min-height: =-120-140
Так вот, в моей карточки товара я убрал описание оставил только картинку, кнопочки, цена и кнопка в корзину.

Проблемы которые не смог решить(Картинки вложил, думаю сразу будет понятно по ним)
1. Если название товара очень длинное min-height маленький не удается поставить, а это влечет за собой дыру между ценой и кнопкой в корзину

2. Вытекающие из первого, если ставлю маленький min-height тогда проблема пагинации по 4 карточки возникает, т.е. рядность становится кривая все уползает, выглядит скверно)

3. Пытался сделать ограничение по символам в наименовании, жестко привязать небольшой размер, все тщетно

 

Сейчас выставляю большой min-height т.к. не смог решить данную проблему на своем сайте(

С позволения админа, ссылка на мою демку - https://dev.oruzheinik.kz/

 

 

Буду очень благодарен любой информации, т.к. уже опустил руки в надежде обуздать проблему....

Снимок1.JPG

Снимок2.JPG

Edited by DenKP
Link to post
Share on other sites

Как вариант
.product-thumb h4 {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}
 
А это убрать
 
.product-thumb .caption {

 min-height: 160px;

}
 
Будет так - https://prnt.sc/123pvn8
 
P.S. Если Вас немного заботит SEO, то лучше названия товарам дать не ка кв прайсе для оптовиков, а для людей, иначе сколько-нибудь нормальных мест не видать, а в худшем случае такие страницы будут выпадать из поисковика...но это мнение - решать Вам.
Edited by specialforce22
Link to post
Share on other sites

24 минуты назад, specialforce22 сказал:
Как вариант
.product-thumb h4 {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}
 
А это убрать
 
.product-thumb .caption {

 min-height: 160px;

}
 
Будет так - https://prnt.sc/123pvn8
 
P.S. Если Вас немного заботит SEO, то лучше названия товарам дать не ка кв прайсе для оптовиков, а для людей, иначе сколько-нибудь нормальных мест не видать, а в худшем случае такие страницы будут выпадать из поисковика...но это мнение - решать Вам.

Спасибо сейчас попробую.

С названием процесс идет, там момент что идет сихнронизация с базы, а базу так быстро не удается поправить

Link to post
Share on other sites

@specialforce22 идея интересная, но все равно есть проблемы что уползает(вложил скрин). И еще момент, может быть есть возможность хотя бы текст разместить в 2-3 линии, тогда даже если 3 линия будет длинная это не критично.
image.png.9a67ba570a065c69886f8b64d01f247b.png

Link to post
Share on other sites

4 часа назад, DenKP сказал:

но все равно есть проблемы что уползает(вложил скрин).

задайте фиксированную высоту
-----
тут печально немного http://joxi.ru/4AkPdknC0E39pr

Link to post
Share on other sites

В 27.04.2021 в 05:21, sasha3337774 сказал:

задайте фиксированную высоту
-----
тут печально немного http://joxi.ru/4AkPdknC0E39pr

ТАк и так сижу на фиксе, но получается слишком длинная карточка товара

Link to post
Share on other sites

поставьте здесь https://prnt.sc/127km09 значение 100, как вариант 

когда 100 вроде ничего не ломается

Edited by sasha3337774
Link to post
Share on other sites

Posted (edited)

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

 

image.png

Edited by DenKP
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.