Адаптивные блоки для товаров, проблема с заголовком и ценой, не адаптирует, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте, ставлю адаптивные блоки, точнее уже поставил на сайт, поднастроил, когда сжимаю окно брайзера, фото и сам блок он подстраивается, где 3 блока вряд, где 2, а где 1, так вот, сам заголовок и цена, они стоят на месте, выходит что много свободного пространства, а так же при маленьком окне где один блок, шрифт хотел сделать чуть по меньше, тож не делает.

Вот тут css и блоки в деле: codepen.io/anon/pen/RKgmRq
Только чет там заголовки уехали.

@media only screen and (min-width: 465px) {
.product-wrapper {
width: 50%;
}
.product h2{
font-size: 0.3rem;
}
}

А вот полный вид блоков:
Вид блоков с пространством о котором я говорил:

Answer 1

[Андрей]

используйте margin:0; ну или нужные отступы

Comments

[Антон Вебсайтовский]

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

[Андрей]

дело в том, что в блоке с классом product-photo и ссылке с классом product animi установлена фиксированная высота 250px и 300px, вам ее нужно тоже изменять либо процентным соотношением или подгонять.

Answer 2

[Егор Живагин]

По порядку
- Вложите заголовок в div с картинкой
- div-у с картинкой и заголовком position: relative, заголовку position: absolute
- Двигаем заголовок под фото bottom: -20px
- центрируем по горизонтали ровно под картинку left: 50%; transform: translateX (-50%)

Всё, теперь куда картинка - туда и заголовок

Comments

[Антон Вебсайтовский]

чет не работает.

[Антон Вебсайтовский]

а не все работает, заголовок то ездит, а вот пространство все равно тоже остается.

[Антон Вебсайтовский]

Сделал так и все ок стало.

.product-photo {
position: relative;
height: 100%;
min-height: 100px;
}