My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed when the window size is 640px. I attempted to use media queries in CSS to address this issue, but it did not work. Can anyone provide guidance on how to fix the position of the circles? Here are the relevant screenshots for reference: https://i.sstatic.net/krVZG.png https://i.sstatic.net/aoHSK.png
.col-md-4{
padding-top: 45px ;
}
.cdev {
position: relative;
height: 100px;
width: 100px;
margin: auto;
}
.cdev div {
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
}
.cdev div span {
position: absolute;
font-family: Arial;
font-size: 25px;
line-height: 75px;
height: 75px;
width: 75px;
left: 12.5px;
top: 12.5px;
text-align: center;
border-radius: 50%;
background-color: white;
}
.cdev .background { background-color: #b3cef6; }
.cdev .rotate {
clip: rect(0 50px 100px 0);
background-color: #4b86db;
}
.cdev .left {
clip: rect(0 50px 100px 0);
opacity: 1;
background-color: #b3cef6;
}
.cdev .right {
clip: rect(0 50px 100px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
@keyframes
toggle { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 992px) {
#skill2 .card {width:500px;height:330px;background:red;}
}
@media only screen and (max-width: 768px)
{
#skill2 .card .col-md-4
{
padding-top: 65px ;
position:relative;
margin-left:30px;
}
}
@media only screen and (max-width: 640px)
{
#skill2 .card {width:300px;}<html>
<body>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!--jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Latest compiled and minified JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div id="skill">
<h3><center>Skills</center></h3>
<div class="row my-4">
<div class="col">
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex" id="skill2">
<div class="card card-body flex-fill">
<div class="card-header"><center>Traings & Online Courses</center></div>
<div class="card-content">
<div class="row">
<div class="col-sm-3 col-md-4 ">
<div class="cdev" data-percent="100" data-duration="1000" data-color="#bdc3c7,#26A69A"></div>
</div>
<div class="col-sm-3 col-md-4">
<div class="cdev" data-percent="70" data-duration="1000" data-color="#bdc3c7,#7f8c8d"></div>
</div>
<div class="col-sm-3 col-md-4">
<div class="cdev" data-percent="65" data-duration="1000" data-color="#bdc3c7,#8e44ad"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Any assistance with this issue would be greatly appreciated. Thank you in advance :)