Fully responsive progress bar

Question

I have to create a progress bar that has to be fully responsive. In order to be responsive I don't want the progress bar class to have a fixed width, but when I put auto in width, line of progress bar is detached from the star also if I give to them auto width

Fixed width: look good

Width auto

First how can I fix this issue, and perhaps someone can help me achieve this progress bar to be responsive on mobile also so that the line of progress bar will be vertical.

.progress-bar {
  width: 750px;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  width: 100%;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet::after {
  display: none;
}

.progress-bar .step .bullet:before,
.progress-bar .step .bullet::after {
  position: absolute;
  content: "";
  height: 3px;
  right: -136px;
  bottom: 11px;
  width: 142px;
  background: #C1C1C1;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}

<div class="progress-bar">
  <div class="step">

    <div class="bullet active-bullet">
      <img src="star-pb-active.svg">
    </div>
    <div class="check active-check" style="
            border-bottom: 2px solid black;
            padding: 2px;
            DISPLAY: table-cell;
            LEFT: 40px;
            POSITION: relative;
        ">Order placed</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Jewerly Creation</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Packing & Quality Control</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Shipped</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Estimated Delivery</div>
  </div>
</div>

Answer 1

You should try taking a look at the flex-grow property from Flexbox. By giving display: flex to the parent, and flex-grow: 1 to the children, you should be able to make every step be the same size and take all the width of their container.

Answer 2

It works the way you want, in fixed or auto width.

.progress-bar {
  width: auto;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.progress-bar .step::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 3px;
  top: 12px;  /* 1/2 of .bullet's height */
  width: 100%;
  background: #C1C1C1;
}

.progress-bar .step:last-child::after {
  display: none;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}

Added pseudo element on the parent of .bullet. Also you don't need ::before, one of those pseudo elements was enough.