I have a unique setup where I have text on the left side and two ellipses/circles on the right side. I need these circles to be responsive. You can see a live demo on jsfiddle here
Below is my current code:
HTML
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 col-xs-12">
left content
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="c1">
<div class="connect1"></div>
</div>
<div class="c2">
</div>
</div>
</div>
</div>
CSS
.c1, .c2 {
border-radius: 50%;
width: 200px;
height: 200px;
background: aqua;
position: absolute;
}
.c1 {
left: 20px;
top: 50px;
}
.connect1 {
position: absolute;
right: -80px;
top: 130px;
background: orange;
border-radius: 50%;
width: 40px;
height: 40px;
}
.connect1::before, .connect1::after {
content: '';
display: block;
background: orange;
height: 10px;
position: absolute;
z-index: -1;
}
.connect1::before {
width: 200px;
top: -20px;
left: -180px;
transform: rotate(20deg);
}
.connect1::after {
width: 200px;
right: -160px;
top: 70px;
transform: rotate(35deg);
}
.c2 {
left: 300px;
top: 180px;
}
When viewed on a mobile device, the code above displays as shown in this image here: https://i.sstatic.net/JA51Y.png
The expected result on a mobile device should look like this: https://i.sstatic.net/A4ilY.png