Step progress bar not working horizontal in mobile

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.