Div Blocks under each other in mobile version - html

Question

There are 3 block different size in a row. How can I make them responsive, because in mobile version they overlay at each other.
.watch {
position: absolute;
bottom: 0;
left: 50px;
width: 224px;
height: 69px;
cursor: pointer;
background-color: #918A83;
opacity: 0.85;
}
.watch-elements {
margin: 20px 20px;
}
.watch p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
.mouse {
position: absolute;
bottom: 0;
border: 1px solid #DAD3CC;
width: 577px;
height: 69px;
cursor: pointer;
background-color: #fff;
}
.mouse-elements {
text-align: center;
margin-top: 10px;
}
.mouse p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #000;
}
.chat-bot {
position: absolute;
bottom: 20px;
background-color: #09A753;
border-radius: 100px;
right: 100px;
width: 227px;
height: 39px;
cursor: pointer;
}
.chat-bot img {
margin-top: -20px;
margin-left: -15px;
}
.chat-bot p {
display: flex;
justify-content: center;
text-align: center;
margin-top: -15px;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
#media all and (max-width: 1024px) {
.watch img {
position: absolute;
float: left;
left: 0;
}
.watch p {
margin-left: 20px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="container mt-5">
<h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
</div>
</div>
<div class="d-flex justify-content-left">
<div class="watch">
<div class="watch-elements">
<img src="assets/img/icons/icon2.svg">
<p>Watch Presenation</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="mouse">
<div class="mouse-elements">
<img src="assets/img/icons/Icon1.svg"><br>
<p>Scroll Down</p>
</div>
</div>
</div>
<div class="d-flex justify-content-right">
<div class="chat-bot">
<img src="assets/img/06w.png">
<p>Hi, can I help you?</p>
<img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
</div>
</div>
</div>
Now, they arrange in a row as on image
In mobile version left block disappears and I can not see it, also second and third block overlay at each other.

Answer 1

For mobile devices please try position: relative instead of position: absolute. Don't forget to adjust other CSS values as per your requirements. Hope this will solve your issues
#media all and (max-width: 767px) {
.watch, .mouse, .chat-bot{
position:relative;
right:auto;
left:auto;
top:auto;
bottom:auto;
margin:5px 0
}
}

Answer 2

I have put all the elements inside a div with class footer. and used bootstrap flex css properties to align it. Hope its helps you. thanks
.watch {
width: 224px;
height: 69px;
cursor: pointer;
background-color: #918A83;
opacity: 0.85;
}
.watch-elements {
margin: 20px 20px;
}
.watch p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
.mouse {
border: 1px solid #DAD3CC;
width: 577px;
height: 69px;
cursor: pointer;
background-color: #fff;
}
.mouse-elements {
text-align: center;
margin-top: 10px;
}
.mouse p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #000;
}
.chat-bot {
background-color: #09A753;
border-radius: 100px;
right: 100px;
width: 227px;
height: 39px;
cursor: pointer;
}
.chat-bot img {
margin-top: -20px;
margin-left: -15px;
}
.chat-bot p {
display: flex;
justify-content: center;
text-align: center;
margin-top: -15px;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
#media all and (max-width: 1024px) {
.watch img {
position: absolute;
float: left;
left: 0;
}
.watch p {
margin-left: 20px;
}
}
.footer {
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="container mt-5">
<h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
</div>
</div>
<div class="d-flex footer justify-content-sm-center align-content-between flex-sm-wrap flex-lg-nowrap">
<div class="d-flex justify-content-left">
<div class="watch">
<div class="watch-elements">
<img src="assets/img/icons/icon2.svg">
<p>Watch Presenation</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="mouse">
<div class="mouse-elements">
<img src="assets/img/icons/Icon1.svg"><br>
<p>Scroll Down</p>
</div>
</div>
</div>
<div class="d-flex justify-content-right align-items-center">
<div class="chat-bot">
<img src="assets/img/06w.png">
<p>Hi, can I help you?</p>
<img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
</div>
</div>
</div>
</div>

Answer 3

you can try replacing your existing divs with the below ones
<div class="d-flex justify-content-left col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-center col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-right col-lg-3 col-md-6 col-xs-12">

Answer 4

position:absolute and related properties are not suitable for this function. You can use CSS flexbox layout
For more information use this link: Complete Guide to Flexbox
I explain simple usage of flexbox layout using example:
#wrapper{display:flex;flex-wrap:wrap;justify-content:space-between}
/*just for styles*/
#wrapper div{background-color:#f5f5f5;text-align:center;padding:2px 5px;margin:2px}
#e3{width:200px}
<div id="wrapper">
<div id="e1">element 1</div>
<div id="e2">element 2</div>
<div id="e3">element 3</div>
<div id="e4">element 4</div>
</div>
Also with flex layout you can manipulate elements places based on viewport size with order property.