У меня есть тип страницы на рынке, в которой я работаю, но я не могу заставить продукты (элементы div) быть отзывчивыми. Он выглядит ужасно при изменении размера окна или просмотре его на мобильном телефоне. Что я здесь делаю неправильно?Как сделать эти элементы div отзывчивыми?
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
CSS
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 320px;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-1 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-2 {
background: #1d1d1d;
width: 320px;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-3 {
background: #1d1d1d;
width: 320px;
order: 3;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
.lineunderproduct {
width: 75%;
margin: 0 auto;
margin-top: 20px;
}
.title1 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title2 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title3 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.price1 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price2 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price3 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
/* Add to Cart Buttons */
.btn {
border: none;
font-family: 'Droid Serif', serif;
font-size: 20px;
color: #1d1d1d;
background: none;
cursor: pointer;
padding: 20px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: none;
outline: none;
position: relative;
box-shadow: 0px 0px 0px 3px #D4AF37;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5 {
background: #fff;
color: #1d1d1d;
height: 40px;
min-width: 260px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
letter-spacing: 0.1px;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
/* Hover backgorund change background-color: #308014; */
}
@media (max-width: 800px) {
.products {
flex-direction: column;
}
Определение * выглядит ужасно *. Что такое ** желаемый ** дисплей? Стоит отметить, что единственный медиа-запрос, который у вас есть, - «flex-direction: column», который ничего не сделает без «display: flex». Попробуйте добавить это в свой медиа-запрос или добавьте другие изменения в медиа-запрос, чтобы изменить мобильный дисплей. –
@ObsidianAge Im пытается получить 1x3 дисплей продуктов. 3 в каждой строке и, если смотреть на меньшем экране, я хочу, чтобы он изменился на 3x1. – krownfit