4 responsive divs are not showing properly on tab and mobile - html

Question

I am trying to create 4 responsive divs for homepage; tried to decreae padding and margin of div not working.divs should be responsive on mobile devices they shpuld move below each one ; two divs appear on tabs; 4 divs on desktop and one div on mobile
i have tried following HTML:
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
</div>
here is css divs are not showing properly on tab and mobile devices and i want to decreae the padding and margin:
.homepage-div-shadow
{
padding: 20px;
box-shadow: 2px 2px 8px 1px #cccccc;
border: solid 1px #cccccc;
border-radius: 2px;
}
.homepage-div-icon{
background-image: url("image.png");
width: 100px;
height: 100px;
}
.homepage-div a
{
text-decoration: none;
color: white;
font-size: 16px;
}
.homepage-div h2{
font-size: 28px;
opacity: 0.90;
font-weight: 600;
margin: 5%;
margin-bottom: 6px;
}
.homepage-div h6{
font-size: 17px;
padding: 0px;
margin: 0px;
margin-bottom: 20px;
opacity: 0.6;
}
#media(min-width: 769px) {
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container .flex-item {
flex: 1 0 50%;
}
}
#media (min-width: 1024px) {
.flex-container .flex-item {
flex: 1 0 25%;
}
}
.flex-item-inner {
padding: 25px;
margin: 20px;
background-color: white;
}
Here is the demo link: testfellow

Answer 1

Hope the solution below helps. I have just tried to mimic the scenario where there are a certain number of div s. And as per your question and requirement, have:
1. Followed mobile-first approach.
2. For mobile devices, each div should come in separate lines.
3. For tabs (at your breakpoint: 769px and above), two divs should come in a line.
4. For desktops (at your breakpoint: 1024px and above), four divs should come in a line.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #2980b9;
}
.flex {
max-width: 80%;
}
.flex-item {
background-color: #ffffff;
padding: 5em;
border: 1px solid black;
margin: 2% auto;
width: 25%;
}
#media(min-width: 769px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
}
#media(min-width: 1024px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 25%;
}
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>