<div class="container">
<div class="box">
Fast Shipping
<p>lorem ipsum</p>
</div>
<div class="box">
Good Service
<p>lorem ipsum</p>
</div>
<div class="box">
Free Coupons
<p>lorem ipsum</p>
</div>
<div class="box">
New Products
<p>lorem ipsum</p>
</div>
</div>
.container {
display: flex;
justify-content: space-around;
text-align: center;
width: 100%;
flex-wrap: wrap;
margin: 30px 0;
}
.box {
width: 25%;
margin-top: 20px;
}
.box p {
color: #888;
font-size: 14px;
margin-top: 10px;
}
@media screen and (max-width : 1200px) {
.box {
width: 50%;
}
}
@media screen and (max-width : 768px) {
.box {
width: 100%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.