пожалуйста, помогите мне.. у меня проблема с размером моего контента. я хочу сделать сетку еды, но сетка не того же размера.. я хочу исправить ее до того же размера и хорошо выглядеть на мобильных устройствах.. пожалуйста Помоги мне

.product-grid4, .product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins,sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: auto
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label, .product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
.product-grid4 .title {
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
margin: 0 0 7px;
transition: all .3s ease 0s
}
.product-grid4 .title a {
color: #222
}
.product-grid4 .price {
color: #16a085;
font-size: 17px;
font-weight: 700;
margin: 0 2px 15px 0;
display: block
}
.product-grid4 .price span {
color: #909090;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-decoration: line-through;
text-align: left;
vertical-align: middle;
display: inline-block
}
.product-grid4 .add-to-cart {
border: 1px solid #16a085;
display: inline-block;
padding: 10px 20px;
color: #fff;
background: #16a085;
font-weight: 600;
font-size: 14px;
border-radius: 4px;
transition: all .3s
}
@media only screen and (max-width:990px) {
.product-grid4 {
margin-bottom: 30px
}
}<div class = "container">
<div class = "row">
<div class = "col-md-3 col-sm-6 col-xs-6">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "pic-1" src = "img/pic1.jpg">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">50%</span>
</div>
<div class = "product-content">
<h3 class = "title">Burger Bosku</h3>
<div class = "price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-md-3 col-sm-6 col-xs-6">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "pic-1" src = "img/pic2.jpg">
</a>
<span class = "product-discount-label">50%</span>
</div>
<div class = "product-content">
<h3 class = "title">Pasta Special</h3>
<div class = "price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-md-3 col-sm-6 col-xs-6">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "pic-1" src = "img/pic4.jpg">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">10%</span>
</div>
<div class = "product-content">
<h3 class = "title"><a href = "#">Pizza Pizzi</a></h3>
<div class = "price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-md-3 col-sm-6 col-xs-6">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "pic-1" src = "img/pic7.jpg">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">20%</span>
</div>
<div class = "product-content">
<h3 class = "title">Sweet Food</h3>
<div class = "price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
<hr>как я могу это исправить .. я думаю, что все дело в css, но я не знаю, что я должен изменить. пожалуйста, помогите мне.






Если вы хотите, чтобы все изображения были одинакового размера, попробуйте добавить следующее в свой CSS
.pic-1 {
min-height:100px
}
Я обновил изгиб столбца, чтобы выровнять равную высоту. Я только что установил минимальную высоту для вашего класса .product-grid4 .product-image4 img. Вы можете настроить минимальную высоту в зависимости от ваших требований.
.product-grid4,
.product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins, sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s;
margin-bottom:30px;
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label,
.product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
@media (min-width: 501px) {
.product-grid4 .product-image4 img {
min-height: 330px;
}
}
@media (min-width:991px) {
.product-grid4 .product-image4 img {
min-height: 260px;
}
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "row">
<div class = "col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "img-fluid" src = "https://via.placeholder.com/350x350">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">50%</span>
</div>
<div class = "product-content">
<h3 class = "title">Burger Bosku</h3>
<div class = "price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "img-fluid" src = "https://via.placeholder.com/550x150">
</a>
<span class = "product-discount-label">50%</span>
</div>
<div class = "product-content">
<h3 class = "title">Pasta Special</h3>
<div class = "price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "img-fluid" src = "https://via.placeholder.com/350x350">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">10%</span>
</div>
<div class = "product-content">
<h3 class = "title"><a href = "#">Pizza Pizzi</a></h3>
<div class = "price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class = "col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class = "product-grid4">
<div class = "product-image4">
<a href = "#">
<img class = "img-fluid" src = "https://via.placeholder.com/350x150">
</a>
<span class = "product-new-label">New</span>
<span class = "product-discount-label">20%</span>
</div>
<div class = "product-content">
<h3 class = "title">Sweet Food</h3>
<div class = "price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class = "add-to-cart" data-toggle = "modal" data-target = "#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>