Задать вопрос
@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
  • Вопрос задан
  • 55 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
  • beONmax
    Курс HTML / CSS
    1 месяц
    Далее
  • Бруноям
    Вёрстка на HTML и CSS
    3 месяца
    Далее
  • Международная Школа Профессий
    Онлайн-курсы HTML и CSS для начинающих
    3 недели
    Далее
  • Stepik
    Основы вёрстки с HTML и CSS
    1 неделя
    Далее
  • beONmax
    Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
    1 месяц
    Далее
Решения вопроса 1
@r_g_b_a
Вы задали фиксированную высоту блоку .product, содержимое которого не помещается в указанные размеры. Либо сделайте ее динамической, либо ограничивайте высоту заголовка/фото.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы