адаптивная сетка flex-box

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>

css flexbox

Add your own answers!

Ask a Question

Get help from others!