long text in li disturbing the design - css

Question

I have implemented the custom design for the progress. I have used ul-li for that. It's working fine when li has short text but failing with long text. Here is the jsfiddle for same. Can you please help here?
HTML
<div class="stepProgressBarContainer">
<ul class="stepProgessBar">
<li class="completed">Step 1 2 3 4 5 5</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
SCSS
.stepProgressBarContainer {
width: 100%;
.stepProgessBar {
display: flex;
flex-direction: row;
justify-content: stretch;
padding: 0px;
li {
list-style-type: none;
position: relative;
text-align: center;
flex-grow: 1;
&:before{
content: '';
display: block;
width: 18px;
height: 18px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #FFFFFF;
border: 4px solid #CCCCCC;
box-sizing: border-box;
text-align: center;
margin: 0px auto 7.5px auto;
}
&:after{
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #DDDDDD;
top:7px;
left: -50%;
z-index: -1;
}
&:first-child:after{
content: none;
}
&:last-child:before{
border-color:#2266E3;
}
&.completed{
+ :after{
background: linear-gradient(0deg, #2266E3, #2266E3);
}
&:before{
content: '\E73E';
border: 0;
background: #2266E3;
}
}
}
}
}
Note: It should be responsive.
Thanks in advance.

Answer 1

Problem with adding justify-content: stretch; in your code. I have replaced justify-content: space-between; for equal spacing between steps. And also added width: 100%; for your list to make it full width.
* {
box-sizing: border-box;
position: relative;
}
.stepProgressBarContainer {
width: 100%;
}
.stepProgressBarContainer .stepProgessBar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px;
}
.stepProgressBarContainer .stepProgessBar li {
list-style-type: none;
position: relative;
text-align: center;
display: block;
width: 100%;
}
.stepProgressBarContainer .stepProgessBar li:before {
content: '';
display: block;
width: 18px;
height: 18px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #fff;
border: 4px solid #ccc;
box-sizing: border-box;
text-align: center;
margin: 0px auto 7.5px auto;
}
.stepProgressBarContainer .stepProgessBar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #ddd;
top: 7px;
left: -50%;
z-index: -1;
}
.stepProgressBarContainer .stepProgessBar li:first-child:after {
content: none;
}
.stepProgressBarContainer .stepProgessBar li:last-child:before {
border-color: #2266e3;
}
.stepProgressBarContainer .stepProgessBar li.completed +:after {
background: linear-gradient(0deg, #2266e3, #2266e3);
}
.stepProgressBarContainer .stepProgessBar li.completed:before {
content: '\E73E';
border: 0;
background: #2266e3;
content: "\f007";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
<div class="stepProgressBarContainer">
<ul class="stepProgessBar">
<li class="completed">Step 1 2 3 4 5 5</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>

Answer 2

Considering the responsive mode, something like this:
#media only screen and (max-width: 360px) {
.stepProgressBarContainer .stepProgessBar li {
min-width: 70px;
}
}
#media only screen and (min-width: 361px) {
.stepProgressBarContainer .stepProgessBar li {
min-width: 84px;
}
}