responsive progress circle using uikit and css - html

Question

.booking{
background-color: #f8f8f8;
}
.circle-text {
display: block;
margin: auto;
height: 150px;
width: 150px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background:green ;
color: #fff;
font: 12px "josefin sans", arial;
line-height: 150px;
z-index: 1;
position: relative;
}
#media screen and (min-width: 320px) and (max-width:800px) {
.circle-text{
height:70px;
width:70px;
line-height:70px;
}
}
#media screen and (min-width:320px) and (max-width:800px){
.steps:not(:first-child)::before {
content: "";
top: 37px;
}
}
.step:nth-child(2) .circle-text {
background: grey;
}
.step:nth-child(3) .circle-text {
background: grey;
}
.a {
display: inline-block;
position: relative;
}
.uk-process-step {
position: relative;
}
.step:not(:first-child)::before {
content: "";
left: -50%;
position: absolute;
top: 77px;
width: 100%;
border-bottom: 5px solid grey;
}
.step.active ~ .step:before {
border-bottom: 5px dotted grey;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class=" booking">
<div class="uk-container uk-container-expand uk-padding-large">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 step circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 step active">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3 step ">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</section>
enter code here
I want to make responsive progress bar using pure css and uikit 3. This code i was written it works when it show in desktop mode . when i switching desktop mode to mobile mode , line is not responsive .the line goes to down . But i want to these line middle of circle even in desktop mode as well and mobile mode.

Answer 1

Use media queries and define the breakpoints
Try this.
.booking{
background-color: #f8f8f8;
}
.circle-text {
display: block;
margin: auto;
height: 150px;
width: 150px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background:green ;
color: #fff;
font: 12px "josefin sans", arial;
line-height: 150px;
z-index: 1;
position: relative;
}
.step:nth-child(2) .circle-text {
background: grey;
}
.step:nth-child(3) .circle-text {
background: grey;
}
.a {
display: inline-block;
position: relative;
}
.uk-process-step {
position: relative;
}
.step:not(:first-child)::before {
content: "";
left: -50%;
position: absolute;
top: 77px;
width: 100%;
border-bottom: 5px solid grey;
}
.step.active ~ .step:before {
border-bottom: 5px dotted grey;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
#media screen and (max-width:767px)
{
.circle-text{
width:120px;
height:120px;
line-height: 120px;
}
.step:not(:first-child)::before{
top:60px;
}
}
#media screen and (max-width:480px)
{
.circle-text{
width:100px;
height:100px;
line-height: 100px;
}
.step:not(:first-child)::before{
top:50px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class=" booking">
<div class="uk-container uk-container-expand uk-padding-large">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 step circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 step active">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3 step ">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</section>