Как сделать правильное выравнивание товаров в мобильной версии, при нажатии на товар?

Question

[Дмитрий Борисов]

Доброго времени суток! бьюсь уже не первый день с этим, у всех товаров описание где-то больше, а где-то меньше, плюс у некоторых товаров еще выводятся опции и все они разных размером, я решил эту проблему тем, что сделал вывод описания меньше для всех до нажатия. Однако после нажатия получается вот такая вот проблема

Посмотреть можно Здесь

до нажатия

и после


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

Хотя бы вот так

Посмотреть можно Здесь

Answer 1

[ⓒⓢⓢ]

в мобильной версии для карточки (.product-grid li) добавьте стиль vertical-align: top;
https://yadi.sk/i/3kW98r-js3AmuQ

Comments

[Дмитрий Борисов]

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

[ⓒⓢⓢ]

Дмитрий Борисов, тут лёгкими правками не отделаетесь.
Для мобильной версии начиная с тега ul и углубляясь во внутренние элементы добавить к существующим следующие стили:

ul.product-grid {
  display: flex;
  flex-flow: row wrap;
}
ul li {
  display: flex;
  flex-flow: row wrap;
}
ul li .product-block {
  display: flex;
  margin: 0 !important;
}
ul li .product-block-inner {
  display: flex;
  flex-flow: column nowrap;
}
/* Отступ для кнопки */
ul li .product-block-inner .price {
  margin-top: auto;
}

Используемые селекторы классов уже сами расставьте, какие у вас используются для мобильной версии.
Всё это надо чтобы блок с кнопкой растянуть по размеру с соседней карточкой, в итоге должно выглядеть так: https://yadi.sk/i/j9gVOzOdub6guQ

[Дмитрий Борисов]

ⓒⓢⓢ, спасибо вам!!

Answer 2

[mahmudchon]

Задайте для поля с описанием какое то мин значение высоты, например: min-height: 120px;
И плюс к этому, вы можете обрезать описание на странице с выводом всех товаров до опреленного количества символов. Но, с учётом, что у вас там ещё информация, тогда решение ниже.
Крутое решение есть у flex. Колонки же получаются одной высоты и, например, последний элемент можно опустить в самый них, используя margin-top: auto;
https://stackoverflow.com/questions/33924655/posit...