Step progress bar not working horizontal in mobile - html

Question

I am trying to implement the step progress bar and I have done the below for the desktop version.
Photo who works on the desktop like
Desktop Version
When I try to do it horizontally on a mobile that does not work, it appears vertically
Photo who works in the mobile
Mobile Version
Code Html :
<div class="progress">
<ul1>
<li>
<i class="fa fa-check"></i>
<p>Email</p>
</li>
<li>
<i class="fa fa-refresh"></i>
<p>Register form</p>
</li>
<li>
<i class="fa fa-times"></i>
<p>Done</p>
</li>
</ul1>
</div>
CSS Code :
.progress{
margin-left: 10px auto;
}
.progress img{
width: 80px;
margin-bottom: 20px;
}
ul1{
text-align: center;
}
ul1 li{
display: inline-block;
width: 200px;
position: relative;
margin-top: 10px;
}
ul1 li .fa{
background: #ccc;
height: 26px;
color: #fff;
border-radius: 50%;
padding: 5px;
}
ul1 li .fa::after{
content: '';
background: #ccc;
height: 5px;
width: 205px;
display: block;
position: absolute;
left: 0;
top: 60px;
z-index: -1;
}
ul1 li:nth-child(2) .fa{
background: #ca261a;
}
ul1 li:nth-child(2) .fa::after{
background: #ca261a;
}
ul1 li:nth-child(1) .fa
{
background: #60aa97;
}
ul1 li:nth-child(1) .fa::after
{
background: #60aa97;
}
ul1 li:first-child .fa::after{
width: 105px;
left: 100px;
}
ul1 li:last-child .fa::after{
width: 105px;
}

Answer 1

You use fixed width (in px unit) while overall width from 3 li is wider than screen size.
To fix this, use fluid width such as percentage (%).
.progress {
margin-left: 10px auto;
}
.progress img {
width: 80px;
margin-bottom: 20px;
}
/* use media queries to smaller font size on small screen to prevent them push bar to vertical. */
.progress p {
font-size: 12px;
}
#media (min-width: 400px) {
.progress p {
font-size: initial;
}
}
ul {
list-style: none;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
width: 30.33%;/* make it fluid */
position: relative;
margin-top: 10px;
}
ul li .fa {
background: #ccc;
height: 26px;
color: #fff;
border-radius: 50%;
padding: 5px;
}
ul li .fa::after {
content: '';
background: #ccc;
height: 5px;
width: 100%;/* make it fluid */
display: block;
position: absolute;
left: 0;
top: 60px;
z-index: 0;/* higher than last step */
}
ul li:nth-child(2) .fa {
background: #ca261a;
}
ul li:nth-child(2) .fa::after {
background: #ca261a;
}
ul li:nth-child(1) .fa {
background: #60aa97;
}
ul li:nth-child(1) .fa::after {
background: #60aa97;
}
ul li:first-child .fa::after {
width: 100%;
left: 50%;
}
ul li:last-child .fa::after {
width: 60%;/* +10 for -10 in left property */
left: -10%;/* for remove empty space on left */
z-index: -1;/* put to bottom */
}
<div class="progress">
<ul>
<li>
<i class="fa fa-check"></i>
<p>Email</p>
</li>
<li>
<i class="fa fa-refresh"></i>
<p>Register form</p>
</li>
<li>
<i class="fa fa-times"></i>
<p>Done</p>
</li>
</ul>
</div>
I've changed your CSS a little, please read in code comment (/* comment */).
However, you may found that in very small screen the font maybe very small. This is for prevent the progress step push to new line. It is not good fix but it can be helped.
Smallest screen tested is 320pixels.
See it on jsfiddle.