I am facing an issue with displaying 4 divs of equal size on my website. In desktop view, they appear side by side but in mobile view, they stack on top of each other. I have tried using display: flex; and bootstrap classes like col-3, col-sm-3, col-md-3, col-lg-3, but the layout is still not responsive.
.container-fluid{
min-width: 290px;
max-width: 1500px;
margin: 15px 10px;
text-align: center;
/* border: 0px solid #777; */
/* border-radius: 5px; */
}
.content{
font-family: 'Hammersmith One', sans-serif;
margin: 10px 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
cursor: pointer;
position: relative;
}
.content .box{
min-width: 200px;
margin: 8px;
/* border: 0.5px solid #ccc; */
padding: 1px;
border-radius: 10px;
letter-spacing: 1px;
}<div class="container-fluid mt-5">
<div class="row">
<div class="col-md-10 col-12 mx-auto">
<div class="content col-12 col-sm-12 col-md-12 col-lg-12">
<a class="page" id="confirmed" tabindex="0">
<div class="box confirmeds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
<p>Confirmed</p>
<i class='bx bx-plus'>550</i>
<h3>//data came from API</h3>
</div>
</a>
<a class="page" id="active" tabindex="0">
<div class="box actived nav-item col-3 col-sm-3 col-md-3 col-lg-3">
<p>Active</p>
<h6></h6>
<h3>//data came from API</h3>
</div>
</a>
<a class="page" id="recover" tabindex="0">
<div class="box recovereds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
<p>Recovered</p>
<i class='bx bx-plus'> 1500</i>
<h3>//data came from API</h3>
</div>
</a>
<a class="page" id="dieds" tabindex="0">
<div class="box deathss nav-item col- 3 col-sm-3 col-md-3 col-lg-3">
<p>Deaths</p>
<i class='bx bx-plus' >502</i>
<h3>//data came from API</h3>
</div>
</a>How can I make them align side by side? I have attempted to use @media queries without success. Can someone suggest some media queries to adjust font sizes for a specific width (mobile view)? Below are some screenshots for reference :- https://i.sstatic.net/CzakN.jpg