Step progress bar not working horizontal in mobile-CodePudding

I am trying to implement step progress bar and I have done the below for desktop version.

Photo who works in the desktop like

When I try to do it horizontally in a mobile that does not work, it appears vertically

Photo who works in the mobile

Code Html :

<div >      
    <ul1>
        <li>
            <i ></i>
            <p>Email</p>
        </li>
        <li>
            <i ></i>
            <p>Register form</p>
        </li>
        <li>
            <i ></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;
}

CodePudding user response：

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 >      
    <ul>
        <li>
            <i ></i>
            <p>Email</p>
        </li>
        <li>
            <i ></i>
            <p>Register form</p>
        </li>
        <li>
            <i ></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.