Utilizing bootstrap for my layout, I have a row with 4 columns where the content within each div has varied top margins. This creates a cascading effect and looks great on desktop screens. However, the issue arises when viewing it on smaller screens as the margin remains, creating a large gap between the content. My goal is to have the divs stack with a small (10px) space between them. I've attempted adjusting the CSS and incorporating @media queries but haven't been successful in reducing the space.
Below is the HTML code:
<div class="container" style='min-height:600px'><br>
<div class='row'>
<div class='col-sm-3' id='col-1'>
<div class='col-1-box'></div>
</div>
<div class='col-sm-3' id='col-2'>
<div class='col-2-box'></div>
</div>
<div class='col-sm-3' id='col-3'>
<div class='col-3-box'></div>
</div>
<div class='col-sm-3' id='col-4'>
<div class='col-4-box'></div>
</div>
</div>
</div>
And here is the UPDATED CSS styling:
<style>
@media only screen and (max-width: 600px) {
.col-1-box, .col-2-box, .col-3-box, .col-4-box {
margin-top: 3%;
}
}
#col-1{
background-color:;
}
#col-2{
background-color:;
}
#col-3{
background-color:;
}
#col-4{
background-color:;
}
.col-1-box{
margin-top:0%;
padding:0px 10px 0 10px;
min-height:400px;
background-color:white;
box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-2-box{
margin-top:25%;
padding:0px 10px 0 10px;
min-height:400px;
background-color:white;
box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-3-box{
margin-top:50%;
padding:0px 10px 0 10px;
min-height:400px;
background-color:white;
box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-4-box{
margin-top:75%;
padding:0px 10px0 10px;
min-height:400px;
background-color:white;
box-shadow: 2px 4px 7px -2px #6E6E6E;
}
</style>