Как сделать адаптивность блока товара?

Question

[alexei_2002]

Нужно сделать так, чтобы при добавлении слов в заголовок товара(product-title) или изменении высоты окна браузера, "цена" и "купить" не выходили за рамки родительского блока. Блок product-img вытесняет их. Сам студент... помогите пожалуйста

<div class="catalog">.
		<div class="product">
			<a href="#"><span class="product-title">Силиконовый чехол Glass для Samsung Galaxy S8</span></a>
                <div class="product-img"><a href="#"></a></div>
                <p class="price">399<span>₽</span><a href="#">Купить</a></p>
		</div>
	</div>

<style type="text/css">
		.catalog{
			width: 75%;
			height: 100%;
			border: solid 2px red;
			margin-top: 100px;
			margin-left: 12.5%;
			z-index: -1;
		}
		.product{
			width: 25%;
			height: 300px;
			border: solid 2px green;
			position:relative;
			z-index: -1;
		}
		.product-title{
			display: inline-block;
			text-align: center;
		}
		.product-img{
			width: 70%;
			height: 68.5%;
			margin: 5px auto;
			border: solid 2px yellow;
		}
		.price a{
			float: right;
		}
	</style>

https://codepen.io/Jlexa_K02/pen/zYKMyEN

Answer 1

[r_g_b_a]

Вы задали фиксированную высоту блоку .product, содержимое которого не помещается в указанные размеры. Либо сделайте ее динамической, либо ограничивайте высоту заголовка/фото.