@dudchenko666

Не могу сделать карточки товара каким образом мне это сделать?

Пишу код по гайдам из справочников,ничего не работает не display:flex; не float:left/right;
МОЙ КОД НИЖЕ:

Вот код HTML - карточка товара
<div id="product">
		<div id="product-list">
			<h3>Among us</h3>
			<img src="img/goods/AmongUs.png">
			<p class="price">$1,76</p>
			<p><button>Описание</button></p>
		</div>
	</div>

Вот моя адаптивная вёрстка
#product{
	margin: 10px;
	padding-left:25px; 
	padding-top: 50px;
	padding-right: 900px;
	background: #171717;
	background: ;
	font-size: 16px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
}
#product-list{
	padding-left: 2px;
	margin-right: 25px;
	background: ;
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  	width:290px;
 	margin: auto;
  	text-align: center;
 	 font-family: arial;
 	 border-radius: 10px 10px;

}
#product-list img{
	max-height: 15%;
	display:inline-block;
	width: 220px;
	border-radius: 70px;
}
.price {
  color: grey;
  font-size: 22px;
}
#product-list button {
	border-radius: 12px 12px;
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #1c1a1a;
  text-align: center;
  cursor: pointer;
  width: 80%;
  font-size: 18px;
}

#product-list button:hover {
  opacity: 0.7;
}
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
@dudchenko666 Автор вопроса
Итак ,ответ я сам нашёл ,спасибо за ваши советы, я к ним прислушался и начал писать код заново.
И оказалась ,что лишнее являлось вот этот код margin:auto;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы