使响应成为一个进度步骤栏

Question

我设法创建了这个在电脑上看起来不错的进度条，但在手机上却很糟糕且无用。 如何使这段代码响应，在紧凑的屏幕上也能获得良好的性能？ 我甚至尝试删除移动版中的步骤栏，并且可以向右滚动文本框，但我没有设法。

这是代码：

＆＃13;

＆＃13;

var leftPoint = 20;
var actualPositionline = 0;
document.addEventListener("DOMContentLoaded", function (event) {

    arrotondaDimSlide();

    var points = document.getElementsByClassName("mih_sliderPointContainer");
    for (var i = 0; i < points.length; i++) {
        points[i].style.left = leftPoint * (i) + "%";

        points[i].addEventListener("click", function () {
            var positionNumber = this.getAttribute("valueSlide");
            moveLine(positionNumber, 0);
        });
    }
});

function moveLine(positionNumber, value) {
    var line = document.getElementById("mih_line");
    positionNumber = parseInt(positionNumber);
    if ((positionNumber + value) < 6 && (positionNumber + value) >= 0) {
        actualPositionline = positionNumber + value;
        line.style.width = leftPoint * parseInt(actualPositionline) + "%";


        var points = document.getElementsByClassName("mih_sliderPointContainer");
        for (var i = 0; i < points.length; i++) {
            points[i].getElementsByClassName("mih_titlePoint")[0].classList.remove("open");
            if (i <= actualPositionline) {
                $(points[i]).addClass("open");
            } else {
                $(points[i]).removeClass("open");
            }
        }
        points[actualPositionline].getElementsByClassName("mih_titlePoint")[0].classList.add("open");
        var c = document.getElementById("mih_slideTextContainer");
        var widthSlide = document.getElementById("mih_slideTextContainer").offsetWidth;
        $(".mih_slideText").css("left", "-" + (widthSlide * actualPositionline) + "px");
    }

}


function changeSlidePoint(value) {
    moveLine(actualPositionline, value);
}


function dimensionSlideText() {
    var widthParent = document.getElementById("mih_slideTextWrapper").clientWidth;
    $(".mih_slideSingleText").width(widthParent + "px");
}


function arrotondaDimSlide() {
    //vado ad arrotondare la dimensione dello slider per non avere problemi con il laft position
    var widthSlide = document.getElementById("mih_slideTextWrapper").offsetWidth;
    document.getElementById("mih_slideTextWrapper").style.width = widthSlide + "px";
}

＆＃13;

table.table_text {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 50px 0;
}

table.table_text {
  width: 100%;
  border-collapse: collapse;
}

td.table_text_td {
    padding: 20px 10px 10px 6px;
    border: 0px;
    text-align: left;
}

th.table_text_th {
    padding: 6px;
    text-align: center;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 0px; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 0px;
        position: relative;
        padding-left: 50%;
        margin: 10px;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    table.team_table{
        width: 70%;
    }

    td.team_td{
        border: none;
        border-bottom: 0px;
        position: relative;
        padding-left: 50%;
        margin: 10px;
    }
}

table.path{
    border:0;
    width:70%;
}

td.path{
    padding: 0px 0;
}

p.style1{
    font-size: 16px;
}

.mih_main{
position: relative;
width: 100%;
height: 150px;
display: inline-block;
}

div#mih_footer{
position: relative;
z-index: 10;
height: 200px; 
background: orange;
}



#mih_slideContainer{
position: absolute;
width: 80%;
height: 60px;
top: 100px;
left: 50%;
transform: translateX(-50%);
}

#mih_slide{
position: relative;
width: 100%;
height: 100%;
}

#mih_leftArrowContainer{
cursor: pointer;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 50%;
z-index: 5;
}

#mih_rightArrowContainer{
cursor: pointer;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 50%;
z-index: 5;
}

#mih_leftArrow{
position: relative;
width: 60px;
height: 100%;
background-image: url("/assets/images/arrow.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
transform: rotate(180deg);
}

#mih_rightArrow{
position: relative;
float: right;
width: 60px;
height: 100%;
background-image: url("/assets/images/arrow.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
}

#mih_stepContainer{
position: absolute;
width: 71.4285%;
height: 30px;
top: 15px;
left: 0;
z-index: 0;
left: 50%;
transform: translateX(-50%);
}

#mih_lineContainer{
position: relative;
width: 100%;
height: 2px;
background-color: #ddd;
margin-top: 14px;
}

#mih_line{
position: absolute;
left: 0;
top:0;
height: 2px;
width: 0;
transition: cubic-bezier(.18, .44, .81, .68) 0.5s;
background-color: #a51c30;
}

.mih_sliderPointContainer{
cursor: pointer;
position: absolute;
width: 32px;
height: 32px;
top: 1px;
background-color: #ddd;
border-radius: 50%;
transform: translate(-50%,-50%);
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0s;
}

.mih_numberPoint{
position: absolute;
width: 100%;
text-align: center;
vertical-align: middle;
line-height: 32px;
color: black;
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0s;
}

.mih_sliderPointContainer.open .mih_numberPoint{
color: white;
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0.5s;
}

.mih_sliderPointContainer.open{
background-color: #a51c30;
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0.5s;
}

.mih_sliderPoint{
position: relative;
width: 100%;
height: 100%;
}

.mih_titlePoint{
position: absolute;
top: -30px;
left: 50%;
font-size: 14px;
transform: translateX(-50%);
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0s;
}

.mih_titlePoint.open{
font-size: 16px;
transition: cubic-bezier(.18, .44, .81, .68) 0.2s 0.5s;
}

#mih_slideTextWrapper{
position: relative;
margin: 0 auto;
margin-top: 230px;
width: 80%;
height: 500px;
}

#mih_slideTextContainer{
font-size: 0;
position: relative;
width: 100%;
margin: 0 auto;
height: 100%;
overflow: hidden;
}

.mih_slideText{
position: absolute;
width: 100%;
min-width: 100%;
height: 100%;
left: 0;
top: 0;
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
transition: cubic-bezier(.18, .44, .81, .68) 0.5s;
font-size: 0;
}


.mih_slideSingleText{
font-size: 0;
position: relative;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
}


.mih_titleSingleText{
width: 100%;
text-align: center;
font-size: 40px;
padding: 15px;
}

.mih_articleText{
width: 100%;
font-size: 14px;
padding: 5px;
white-space: normal;
width: 71.4285%;
margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mih_main">
  <div id="mih_slideContainer">
      <div id="mih_slide">
          <div id="mih_leftArrowContainer" onclick="changeSlidePoint(-1)">
              <div id="mih_leftArrow"></div>
          </div>
          <div id="mih_rightArrowContainer" onclick="changeSlidePoint(1)">
              <div id="mih_rightArrow"></div>
          </div>
          <div id="mih_stepContainer">
              <div id="mih_lineContainer">
                  <div id="mih_line"></div>
                  <div class="mih_sliderPointContainer open" id="mih_point1" valueSlide="0">
                      <p class="mih_numberPoint">1</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Iscriviti</div>
                      </div>
                  </div>
                  <div class="mih_sliderPointContainer" id="mih_point2" valueSlide="1">
                      <p class="mih_numberPoint">2</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Controlla</div>
                      </div>
                  </div>
                  <div class="mih_sliderPointContainer" id="mih_point3" valueSlide="2">
                      <p class="mih_numberPoint">3</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Partecipa</div>
                      </div>
                  </div>
                  <div class="mih_sliderPointContainer" id="mih_point4" valueSlide="3">
                      <p class="mih_numberPoint">4</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Sviluppa</div>
                      </div>
                  </div>
                  <div class="mih_sliderPointContainer" id="mih_point5" valueSlide="4">
                      <p class="mih_numberPoint">5</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Titolo</div>
                      </div>
                  </div>
                  <div class="mih_sliderPointContainer" id="mih_point6" valueSlide="5">
                      <p class="mih_numberPoint">6</p>
                      <div class="mih_sliderPoint">
                          <div class="mih_titlePoint">Titolo</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div id="mih_slideTextWrapper">
      <div id="mih_slideTextContainer">
          <div class="mih_slideText">
              <!-- ho usato il font -->
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">
                      <h2>Step 1: Iscriviti</h2>
                  </div>
                  <div class="mih_articleText">
                      <p class="trafiletti">
                          Il primo passo per poter risolvere le challenges è iscriversi a
                          <strong>Make It Happen</strong>!
                          <br> Cliccando su “Sono uno studente” apparirà in automatico la seguente schermata:
                          <br> Oltre ai dati personali è importante inserire i campi di interesse. Questo ti permetterà
                          di usare il nostro servizio “Notifiche”.
                          <br>Ogni volta che verrà inserita una challenge che rientrata tra gli argomenti da te selezionati
                          ti verrà inviata un’email. In questo modo sarai sempre aggiornato!
                          <br>Appena registrato ti verrà attivata la pagina personale. Qui potrai vedere le nuove challenges,
                          controllare quelle a cui stai lavorando, creare dei team, scriverci o controllare il
                          tuo portafogli dei premi vinti.
                          <br>Potrai caricare il tuo Curriculum Vitae o informazioni su di te e decidere se renderlo
                          pubblico o privato.
                      </p>
                  </div>
              </div>
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">
                      <h2>Step 2: Controlla le Challenges</h2>
                  </div>
                  <div class="mih_articleText">
                      <p class="trafiletti">
                          Nell’area Challenge vengono continuamente pubblicate nuove sfide o domande. Potrai filtrare per parole chiave ed argomenti,
                          cercando le challenges più in linea alle tue conoscenze.
                          <br>
                          <em>DESCRIZIONE DI COME FUNZIONA LA PAGINA E QUALCHE IMMAGINE!</em>
                          <br> Puoi accedere all’area Challenge anche attraverso la tua pagina personale.
                          <br>Trovi uno spazio con tutte le nuove challenges che vengono messe sul nostro sito. Più
                          in basso invece ci sono solo quelle inerenti con i tuoi interessi e capacità!
                          <br>Con il nostro servizio Notifiche invece ti comunichiamo quando viene pubblicata una Challenge
                          che potrebbe interessarti, verrà inviata una mail all’indirizzo che ci segnalerai.
                      </p>
                  </div>
              </div>
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">
                      <h2>Step 3: Partecipa ad una Challenge</h2>
                  </div>
                  <div class="mih_articleText">
                      <p class="trafiletti">
                          Seleziona una o più sfide a cui partecipare e iscriviti. Non ci sono limiti alle challenges che puoi risolvere. Dovrai registrarti e firmare il “Contratto Challenge”.
                          <br>
                          <em>CHE COSA è IL CONTRATTO CHALLENGE? DOBBIAMO DECIDERE E PARLARNE!!</em>
                          <br><em>VEDIAMO QUELLO DI INNOCENTIVE?</em>
                          <br>A quel punto potrai accedere alla descrizione dettagliata, documentazione di supporto e farci domande che potremo inoltrare all’azienda.  
                          <br>Partecipare ad una challenge è gratuito e non vincola il Solver in alcuno modo. Sarai libero di lavoraci o abbandonare il progetto senza conseguenze. 
                          <br>È possibile partecipare a più challenges contemporaneamente.
                          <br>Ogni volta che decidi di iscriverti sulla pagina personale la troverai tra le tue sfide, questo ti permetterà di rientrare a vedere i dettagli ogni volta che vorrai.
                          <br>Se ritieni che non ci siano abbastanza informazioni per poterla risolverla o che il testo non sia chiaro potrai scriverci e noi manderemo la tua domanda all’azienda. 
                          <br>Esistono tre tipi di challenge a cui puoi partecipare. 
                          <br>Le prime le trovi nella “Bacheca Challenge”, ci saranno problemi di natura tecnica, economica e di design. 
                          <br>Saranno i problemi più complessi, ma con un montepremi più altro e con più “Punti challenge” per scalare la classifica dei Top Solvers. 
                          Sono i problemi più sfidanti in cui dovrai metterti in gioco e dimostrare a tutti il tuo valore!
                          <br>
                          Le seconde Challenge le trovi nella “Bacheca Questions”. 
                          <br>Qui saranno postate le domande più semplici e con una scadenza più breve. Saranno utili per mettere alla prova i tuoi studi e tenerti sempre allenato!
                          <br>La terza tipologia racchiude le “Premium Challenge”
                          <br>L’azienda chiede a MAKE IT HAPPEN di formare il miglior team di studenti che possa collaborare con loro ad un progetto. 
                          MAKE IT HAPPEN in base alle capacità che l’azienda richiede contatta gli studenti che hanno skills affini e con il punteggio più alto nella classifica dei Top Solvers e li mette in contatto con l’impresa.
                          <br>È il modo migliore per muovere i primi passi nel mondo del lavoro, per fare un’esperienza unica e formativa per il vostro futuro!
                      </p>
                  </div>
              </div>
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">
                      <h2>Step 3:Sviluppa la tua soluzione</h3>
                  </div>
                  <div class="mih_articleText">
                      <p class="trafiletti">
                          Potrai decidere se lavorare solo o in team, l’importante è consegnarla entro la deadline!
                          <br>Ogni studente o team può sviluppare e caricare fino a 10 soluzioni, aumentando le proprie possibilità di vittoria!
                          <br>Durante lo svolgimento della challenge potrai farci domande da inoltrare all’azienda e qualora l’azienda pubblicasse qualcosa di nuovo verrei avvisato tramite email. 
                      </p>
                  </div>
              </div>
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">Testo titolo5</div>
                  <div class="mih_articleText">Testo article
                  </div>
              </div>
              <div class="mih_slideSingleText">
                  <div class="mih_titleSingleText">Testo titolo6</div>
                  <div class="mih_articleText">Testo article
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;