Stack Overflow на русском Asked on December 16, 2021
Всем привет. Подскажите как зафиксировать ширину background для адаптивной сетки?
Вот как должны выглядеть карточки
Но при уменьшении экрана мне нужно чтобы они становились по две, что я делаю с помощью стилей:
@media screen and (max-width: 996px) {
.prices__col{
width: calc(100% / 12 * 4 - 15px);
}
}
Но блин background растягивается а мне нужно чтобы он всегда был не больше изображения.
Как это сделать?
Вот весь код:
.row__prices{
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
justify-content: center;
}
.prices__col{
width: calc(23% - 15px);
margin: 0 15px;
}
@media screen and (max-width: 996px){
.prices__col{
width: calc(100% / 12 * 4 - 15px);
}
}
.prices__item{
border-radius: 6px;
background-image: -moz-linear-gradient( 60deg, rgb(134,227,62) 0%, rgb(22,215,122) 100%);
background-image: -webkit-linear-gradient( 60deg, rgb(134,227,62) 0%, rgb(22,215,122) 100%);
background-image: -ms-linear-gradient( 60deg, rgb(134,227,62) 0%, rgb(22,215,122) 100%);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
.prices__item-text{
padding: 15px 30px;
}
.prices__btn{
text-align: center;
padding: 13px 0;
width: 150px;
background: #fff;
border-radius: 20px;
margin: 20px auto 0px;
display: block;
color: #b2b2b2;
text-transform: uppercase;
text-decoration: none;
}
<div class="row__prices">
<div class="prices__col">
<div class="prices__item">
<div class="prices__item-img">
<img src="img/prises-cart/prise-cart-1.jpg" alt="">
</div>
<div class="prices__item-text">
<h4>Электрические шторы</h4>
<p>SOMFY 1</p>
<p>цена: от <span>2000</span> руб.</p>
<a href="#" class="prices__btn">рассчитать</a>
</div>
</div>
</div>
<div class="prices__col">
<div class="prices__item">
<div class="prices__item-img">
<img src="img/prises-cart/prise-cart-2.jpg" alt="">
</div>
<div class="prices__item-text">
<h4>Электрические шторы</h4>
<p>SOMFY 1</p>
<p>цена: от <span>2000</span> руб.</p>
<a href="#" class="prices__btn">рассчитать</a>
</div>
</div>
</div>
<div class="prices__col">
<div class="prices__item">
<div class="prices__item-img">
<img src="img/prises-cart/prise-cart-3.jpg" alt="">
</div>
<div class="prices__item-text">
<h4>Электрические шторы</h4>
<p>SOMFY 1</p>
<p>цена: от <span>2000</span> руб.</p>
<a href="#" class="prices__btn">рассчитать</a>
</div>
</div>
</div>
<div class="prices__col">
<div class="prices__item">
<div class="prices__item-img">
<img src="img/prises-cart/prise-cart-4.jpg" alt="">
</div>
<div class="prices__item-text">
<h4>Электрические шторы</h4>
<p>SOMFY 1</p>
<p>цена: от <span>2000</span> руб.</p>
<a href="#" class="prices__btn">рассчитать</a>
</div>
</div>
</div>
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP