如何使Progress Tracker响应？

Question

我有显示订单进度的进度跟踪器。

但是问题在于，它在移动视图中看起来很可怕。 我想要能够在移动设备和台式机上显示舒适设计的响应式设计。

在桌面上看起来像这样

issue

在“移动”视图下

我的代码就是这样

 <?php
                        $order_status = $row['order_status'];
                        switch ($order_status) {
                            case "P":
                                echo '
                                     <ol class="progtrckr" data-progtrckr-steps="4" style="width:1035px;  margin-bottom: 25px;">
                                       <li class="progtrckr-done">Placed Order</li>
                                       <li class="progtrckr-todo">Processed</li>
                                       <li class="progtrckr-todo">dispatch</li>
                                       <li class="progtrckr-todo">Completed</li>
                                     </ol>';
                                break;
                            case "PS":
                                echo '
                                        <ol class="progtrckr" data-progtrckr-steps="5" style="width:1035px;  margin-bottom: 25px;">
                                        <li class="progtrckr-done">Placed Order</li>
                                      <li class="progtrckr-done">Processed</li>
                                      <li class="progtrckr-todo">dispatch</li>
                                      <li class="progtrckr-todo">Completed</li>
                                        </ol>';
                                break;
                            case "D":
                                echo '
                                    <ol class="progtrckr" data-progtrckr-steps="5" style="width:1035px;  margin-bottom: 25px;">
                                    <li class="progtrckr-done">Placed Order</li>
                                  <li class="progtrckr-done">Processed</li>
                                  <li class="progtrckr-done">dispatch</li>
                                  <li class="progtrckr-todo">Completed</li>
                                  </ol>';
                                break;
                            case "C":
                                echo '
                                    <ol class="progtrckr" data-progtrckr-steps="5" style="width:1035px;  margin-bottom: 25px;">
                                    <li class="progtrckr-done">Placed Order</li>
                                    <li class="progtrckr-done">Processed</li>
                                    <li class="progtrckr-done">dispatch</li>
                                    <li class="progtrckr-done">Completed</li>
                                    </ol>';
                                break;
                            default:
                                echo 'No Data Available At Moment';
                        }
                        ?>

MY CSS这样

 <style>
            ol.progtrckr {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            ol.progtrckr li {
                display: inline-block;
                text-align: center;
                line-height: 3.5em;
            }

            ol.progtrckr[data-progtrckr-steps="2"] li {
                width: 49%;
            }

            ol.progtrckr[data-progtrckr-steps="3"] li {
                width: 33%;
            }

            ol.progtrckr[data-progtrckr-steps="4"] li {
                width: 24%;
            }

            ol.progtrckr[data-progtrckr-steps="5"] li {
                width: 19%;
            }

            ol.progtrckr[data-progtrckr-steps="6"] li {
                width: 16%;
            }

            ol.progtrckr[data-progtrckr-steps="7"] li {
                width: 14%;
            }

            ol.progtrckr[data-progtrckr-steps="8"] li {
                width: 12%;
            }

            ol.progtrckr[data-progtrckr-steps="9"] li {
                width: 11%;
            }

            ol.progtrckr li.progtrckr-done {
                color: black;
                border-bottom: 4px solid yellowgreen;
            }

            ol.progtrckr li.progtrckr-todo {
                color: silver;
                border-bottom: 4px solid silver;
            }

            ol.progtrckr li:after {
                content: "\00a0\00a0";
            }

            ol.progtrckr li:before {
                position: relative;
                bottom: -2.5em;
                float: left;
                left: 50%;
                line-height: 1em;
            }

            ol.progtrckr li.progtrckr-done:before {
                content: "\2713";
                color: white;
                background-color: yellowgreen;
                height: 2.2em;
                width: 2.2em;
                line-height: 2.2em;
                border: none;
                border-radius: 2.2em;
            }

            ol.progtrckr li.progtrckr-todo:before {
                content: "\039F";
                color: silver;
                background-color: white;
                font-size: 2.2em;
                bottom: -1.2em;
            }

            .pointer {
                cursor: pointer;
            }

            .blink_me {
                animation: blinker 3s linear infinite;
            }

            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }
        </style>

有什么方法可以对此做出回应。