TransWikia.com

адаптивная сетка 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>

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP