We are currently facing an issue with the responsive divs in our project. Instead of clearing other div elements on the page, they are overlapping. Our project is built using bootstrap 4.3.1 and we would appreciate any assistance.
Feel free to visit this webpage to see the problem firsthand.
If you have any insights or solutions, please share them with us!
/* Code for creating two equal columns that float next to each other */
.column_left {
float: left;
width: 50%;
padding: 10px;
height: 250px;
margin-bottom: 5px;
border-radius: 10px;
background: #E6E6E8;
}
.column_right {
float: right;
width: 50%;
padding: 5px;
height: 250px;
margin-bottom: 5px;
border-radius: 10px;
background: #E6E6E8;
}
.setADS {
float: right;
margin: 0px;
}
/* Clear floats after the columns */
.setADS:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column_left,
.column_right {
width: 100%;
bottom: 0;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89c86cadad2dadffbcfc9d7dbd29bd1ded0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="setADS">
<div class="column_left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column_right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column_left" style="background-color:#aaa;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column_right" style="background-color:#bbb;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>