Inconsistent layout between mobile and desktop versions

function showSection(sectionId) {  document.querySelectorAll('.section').forEach(function(section) {    section.classList.remove('active');  });  document.getElementById(sectionId).classList.add('active');}function nextSection(sectionId) {  if (sectionId === "nodo-inferiore") {    if (validaForm("form-misure")) {      showSection(sectionId);    } else {      alert("Per favore, compila tutti i campi obbligatori.");    }  } else if (sectionId === "risultato") {    if (validaForm("form-nodo-inferiore")) {      showSection(sectionId);    } else {      alert("Per favore, compila tutti i campi obbligatori.");    }  } else {    showSection(sectionId);  }}function prevSection(sectionId) {  showSection(sectionId);}function validaForm(formId) {  const form = document.getElementById(formId);  const inputs = form.querySelectorAll("input");  let isValid = true;  inputs.forEach(input => {    if (!input.value) {      isValid = false;      input.style.border = "1px solid red";    } else {      input.style.border = "";    }  });  return isValid;}document.getElementById('form-misure').addEventListener('submit', function(event) {  event.preventDefault(); // Impedisce l'invio del form  if (validaForm('form-misure')) {    // Esegui i calcoli e visualizza i risultati    calcolaRisultati();  } else {    alert('Per favore, compila tutti i campi obbligatori.');  }});function calcolaRisultati() {  const LE = parseFloat(document.getElementById('LE').value);  const H4 = parseFloat(document.getElementById('H4').value);  if (!isNaN(LE)) {    const LA = LE - 94 * 2;    const LV = LE - 48 * 2;    // Aggiorna il contenuto degli span risultati    document.getElementById('risultatoLA').textContent = `Larghezza Architettonica (LA): ${LA}`;    document.getElementById('risultatoLV').textContent = `Larghezza Vano (LV): ${LV}`;    // Mostra il div dei risultati    document.getElementById('risultati').classList.add('show');    // Calcola il prezzo    calcolaPrezzo();  } else {    alert("Per favore, inserisci un valore numerico valido per LE.");  }}function parseTable(rawData) {  const lines = rawData.trim().split('\n');  const headers = lines[0].split('\t').slice(1);  const rows = lines.slice(1).map(line => line.split('\t'));  const prices = {};  rows.forEach(row => {    const key = parseFloat(row[0]);    prices[key] = {};    row.slice(1).forEach((value, index) => {      prices[key][parseFloat(headers[index])] = parseFloat(value.replace(',', '.'));    });  });  return prices;}const rawData = `        H/L\t1000\t1100\t1200\t1300\t1400\t1500\t1600\t1700\t1800\t1900\t2000\t2100\t2200\t2300\t2400\t2500\t2600\t2700\t2800\t2900\t3000\t3100\t3200\t3300\t3400\t3500        1000\t518,23\t524,85\t531,49\t538,1\t544,73\t551,35\t557,96\t564,6\t571,22\t577,87\t584,49\t591,12\t597,74\t604,36\t610,98\t617,62\t632,62\t639,23\t645,87\t652,49\t659,1\t705,21\t751,31\t797,42\t843,54\t889,64        1100\t531,49\t538,1\t544,73\t551,35\t557,96\t564,6\t571,22\t577,85\t584,46\t591,12\t597,74\t604,36\t610,98\t617,62\t624,23\t630,86\t645,87\t652,49\t659,1\t665,73\t672,35\t718,45\t764,57\t810,67\t856,78\t902,89        1200\t544,73\t551,35\t557,96\t564,6\t571,22\t577,85\t584,46\t591,1\t597,72\t604,36\t610,98\t617,62\t624,23\t630,86\t637,48\t644,09\t659,1\t665,73\t672,35\t678,98\t685,6\t731,71\t777,81\t823,92\t870,02\t916,14        1300\t557,96\t564,6\t571,22\t577,85\t584,46\t591,1\t597,72\t604,34\t610,96\t617,62\t624,23\t630,86\t637,48\t644,09\t650,73\t657,35\t672,35\t678,98\t685,6\t692,23\t698,84\t744,95\t791,07\t837,17\t883,28\t929,38        1400\t571,22\t577,85\t584,46\t591,1\t597,72\t604,34\t610,96\t617,6\t624,21\t630,86\t637,48\t644,09\t650,73\t657,35\t663,97\t670,59\t685,6\t692,23\t698,84\t705,47\t712,1\t758,2\t804,31\t850,41\t896,52\t942,63        1500\t584,46\t591,1\t597,72\t604,34\t610,96\t617,6\t624,21\t630,84\t637,46\t644,09\t650,73\t657,35\t663,97\t670,59\t677,23\t683,84\t698,84\t705,47\t712,1\t718,72\t725,34\t771,45\t817,55\t863,67\t909,77\t955,88        1600\t597,72\t604,34\t610,96\t617,6\t624,21\t630,84\t637,46\t644,07\t650,71\t657,35\t663,97\t670,59\t677,23\t683,84\t690,47\t697,09\t712,1\t718,72\t725,34\t731,96\t738,58\t784,7\t830,81\t876,91\t923,02\t969,12        1700\t610,96\t617,6\t624,21\t630,84\t637,46\t644,07\t650,71\t657,33\t663,95\t670,59\t677,23\t683,84\t690,47\t697,09\t703,71\t710,34\t725,34\t731,96\t738,58\t745,21\t751,84\t797,94\t844,05\t890,16\t936,27\t982,38        1800\t624,21\t630,84\t637,46\t644,07\t650,71\t657,33\t663,95\t670,57\t677,2\t683,84\t690,47\t697,09\t703,71\t710,34\t716,97\t723,58\t738,58\t745,21\t751,84\t758,45\t765,08\t811,2\t857,3\t903,41\t949,51\t995,62        1900\t637,51\t644,13\t650,75\t657,37\t663,99\t670,62\t677,25\t683,86\t690,49\t697,14\t703,77\t710,38\t717,01\t723,64\t730,26\t736,88\t751,88\t758,51\t765,13\t771,75\t778,38\t824,48\t870,6\t916,7\t962,81\t1008,92        2000\t650,75\t657,37\t663,99\t670,62\t677,25\t683,86\t690,49\t697,11\t703,75\t710,38\t717,01\t723,64\t730,26\t736,88\t743,5\t750,12\t765,13\t771,75\t778,38\t784,99\t791,63\t837,74\t883,84\t929,95\t976,05\t1022,16        2100\t663,99\t670,62\t677,25\t683,86\t690,49\t697,11\t703,75\t710,36\t716,99\t723,64\t730,26\t736,88\t743,5\t750,12\t756,75\t763,38\t778,38\t784,99\t791,63\t798,25\t804,87\t850,98\t897,09\t943,2\t989,31\t1035,41        2200\t677,25\t683,86\t690,49\t697,11\t703,75\t710,36\t716,99\t723,61\t730,24\t736,88\t743,5\t750,12\t756,75\t763,38\t769,99\t776,62\t791,63\t798,25\t804,87\t811,49\t818,13\t864,23\t910,34\t956,44\t1002,55\t1048,66        2300\t690,49\t697,11\t703,75\t710,36\t716,99\t723,61\t730,24\t736,86\t743,48\t750,12\t756,75\t763,38\t769,99\t776,62\t783,24\t789,87\t804,87\t811,49\t818,13\t824,74\t831,36\t877,47\t923,57\t969,68\t1015,78\t1061,9        2400\t703,75\t710,36\t716,99\t723,61\t730,24\t736,86\t743,48\t750,1\t756,72\t763,38\t769,99\t776,62\t783,24\t789,87\t796,49\t803,12\t818,13\t824,74\t831,36\t837,99\t844,6\t890,71\t936,83\t982,93\t1029,04\t1075,14        2500\t716,99\t723,61\t730,24\t736,86\t743,48\t750,1\t756,72\t763,36\t769,97\t776,62\t783,24\t789,87\t796,49\t803,12\t809,73\t816,37\t831,36\t837,99\t844,6\t851,24\t857,86\t903,96\t950,07\t996,17\t1042,28\t1088,4        2600\t746,99\t753,61\t760,23\t766,87\t773,48\t780,11\t786,73\t793,35\t799,98\t806,63\t813,25\t819,87\t826,5\t833,12\t839,74\t846,36\t861,37\t868\t874,61\t881,24\t887,87\t933,97\t980,08\t1026,18\t1072,29\t1118,4        2700\t760,23\t766,87\t773,48\t780,11\t786,73\t793,35\t799,98\t806,61\t813,22\t819,87\t826,5\t833,12\t839,74\t846,36\t853\t859,61\t874,61\t881,24\t887,87\t894,49\t901,11\t947,22\t993,32\t1039,43\t1085,54\t1131,65        2800\t773,48\t780,11\t786,73\t793,35\t799,98\t806,61\t813,22\t819,85\t826,47\t833,12\t839,74\t846,36\t853\t859,61\t866,24\t872,86\t887,87\t894,49\t901,11\t907,74\t914,35\t960,47\t1006,57\t1052,68\t1098,79\t1144,89        2900\t786,73\t793,35\t799,98\t806,61\t813,22\t819,85\t826,47\t833,09\t839,72\t846,36\t853\t859,61\t866,24\t872,86\t879,48\t886,11\t901,11\t907,74\t914,35\t920,98\t927,61\t973,71\t1019,82\t1065,92\t1112,03\t1158,15        3000\t799,98\t806,61\t813,22\t819,85\t826,47\t833,09\t839,72\t846,34\t852,97\t859,61\t866,24\t872,86\t879,48\t886,11\t892,74\t899,35\t914,35\t920,98\t927,61\t934,22\t940,85\t986,96\t1033,07\t1079,18\t1125,28\t1171,39        `;// Converti i dati della tabellaconst tabellaPrezzi = parseTable(rawData);function calcolaPrezzo() {  const H4 = parseFloat(document.getElementById('H4').value);  const LE = parseFloat(document.getElementById('LE').value);  if (!isNaN(H4) && !isNaN(LE)) {    const prezzo = trovaPrezzo(H4, LE);    document.getElementById('prezzoRisultato').textContent = prezzo !== null ? `€${prezzo.toFixed(2)}` : "Prezzo non trovato";  } else {    alert("Per favore, inserisci valori numerici validi per H4 e LE.");  }}function trovaPrezzo(H4, LE) {  const H4Keys = Object.keys(tabellaPrezzi).map(Number).sort((a, b) => a - b);  const LEKeys = Object.keys(tabellaPrezzi[H4Keys[0]]).map(Number).sort((a, b) => a - b);  const H4Adjusted = H4Keys.find(key => key >= H4) || H4Keys[H4Keys.length - 1];  const LEAdjusted = LEKeys.find(key => key >= LE) || LEKeys[LEKeys.length - 1];  if (tabellaPrezzi[H4Adjusted] && tabellaPrezzi[H4Adjusted][LEAdjusted] !== undefined) {    return tabellaPrezzi[H4Adjusted][LEAdjusted];  }  return null;}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');@media screen and (max-width: 768px) {  body {    width: 95%;  }  .header {    flex-direction: column;    align-items: center;  }}@media screen and (max-width: 480px) {}body {  font-family: 'Roboto', sans-serif;  margin: 0;  padding: 0;  padding: 5px;  display: flex;  justify-content: center;  align-items: center;  background-color: #e0e0e0;  color: #333;  overflow: hidden;}.container {  position: relative;  width: 75vw;  /* Imposta la larghezza fissa */  height: 93vh;  /* Imposta l'altezza fissa */  background-color: #fff;  padding: 30px;  border-radius: 12px;  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  transition: box-shadow 0.3s ease-in-out;}.container:hover {  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);}#misure h1 {  margin-left: 60px;  transform: translateY(-3vh);}.custom-entry-azienda {  margin-left: 60px;  transform: translateY(px);}#leggenda {  font-size: 13px;  color: #0368d3;  margin-left: 63vw;  transform: translateY(-51.9vh);  line-height: 0.74}.immagine {  text-align: left;  margin-bottom: vw;  transform: translateY(-4vh);}.immagine img {  max-width: 80%;  height: auto;  border-radius: 12px;  transition: transform 0.3s ease, box-shadow 0.3s ease;}.immagine img:hover {  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.entry {  display: flex;  align-items: center;  margin-bottom: 20px;}.entry label {  flex: 1;  font-weight: 500;}.entry input {  flex: 2;  padding: 10px;  border-radius: 6px;  border: 1px solid #ddd;  font-size: 14px;  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);  transition: border-color 0.3s ease;}.entry input:focus {  border-color: #007bff;  outline: none;}.custom-entry-group {  display: flex;  gap: 14px;  margin-bottom: 30px;  margin-left: 0.6vw;  transform: translateY(-55vh)}.custom-entry-group div {  flex: 1;}.custom-entry-ubicazione {  width: 200px;  margin-left: 60px;  transform: translateY(px);}#ubicazione1 {  margin-left: 27px;}.custom-entry-H4 {  transform: translateX(-120px)}.custom-entry-BT {  width: 10%;  margin-left: -230px;}.custom-entry-BT2 {  width: 20%;  margin-left: -130px;}.custom-entry-azienda input,.custom-entry-ubicazione input,.custom-entry-LE input,.custom-entry-H4 input,.custom-entry-BT2 input,.custom-entry-BT input {  width: 130px;  margin-top: 48.5px;  padding: 12px;  border-radius: 6px;  border: 1px solid #ddd;  font-size: 14px;  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3 ease;}.custom-entry-azienda input:focus,.custom-entry-ubicazione input:focus,.custom-entry-LE input:focus,.custom-entry-H4 input:focus,.custom-entry-BT2 input:focus,.custom-entry-BT input:focus {  border-color: #007bff;  outline: none;}.custom-entry-azienda input:hover,.custom-entry-ubicazione input:hover,.custom-entry-LE input:hover,.custom-entry-H4 input:hover,.custom-entry-BT2 input:hover,.custom-entry-BT input:hover {  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}form button {  background-color: #023872;  color: #fff;  border: none;  padding: 10px 20px;  border-radius: 6px;  font-size: 14px;  font-weight: 500;  cursor: pointer;  transition: background-color 0.3s ease, transform 0.2 ease;}form button:focus {  outline: none;  box-shadow: 0 0 0 2px #023872;}#btn-avanti {  position: absolute;  /* Posizionamento assoluto relativamente al contenitore */  right: 20px;  /* Distanza dal bordo destro del contenitore */  bottom: -62.5vh;  /* Distanza dal bordo inferiore del contenitore */}#btn-indietro {  position: absolute;  /* Posizionamento assoluto relativamente al contenitore */  right: 110px;  /* Distanza dal bordo destro del contenitore, maggiore di #btn-avanti per posizionarlo accanto */  bottom: 18.5px;  /* Distanza dal bordo inferiore del contenitore */}#btn-risultato {  margin-left: 29.3vw;  transform: translateY(-60.7vh)}#risultati {  margin-left: 3.7vw;  transform: translateY(-52.4vh)}#risultatoLV {  margin-left: 15vw;  transform: translateY(-4vh)}#risultatoLA {  transform: translateY(-0.3vh)}#prezzo {  margin-left: 63vw;  transform: translateY(-60.7vh)}#prezzoRisultato {  margin-left: 3.5vw;  transform: translateY(-4.3vh);}#btn-avanti {  margin-left: 70vw;  /* Posizionamento assoluto relativamente al contenitore */  transform: translateY(-64.5vh);}#btn-indietro {  margin-left: 70vw;}#btn-risultato {  margin-left: 29.3vw;  transform: translateY(-60.7vh)}#risultati {  margin-left: 3.7vw;  transform: translateY(-52.4vh)}#risultatoLV {  margin-left: 15vw;  transform: translateY(-4vh)}#risultatoLA {  transform: translateY(-0.3vh)}#prezzo {  margin-left: 63vw;  transform: translateY(-60.7vh)}#prezzoRisultato {  margin-left: 3.5vw;  transform: translateY(-4.3vh);}

<!DOCTYPE html><html lang="it"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>App Web Azienda</title><link rel="stylesheet" href="../static/css/style.css"><style>    .section {      display: none;    }    .section.active {      display: block;    }    #risultati.show {      display: block;    }</style></head><body><div class="container"><div id="misure" class="section active"><h1>Misure</h1><div class="immagine"><img src="../static/images/BKS_STD.png" alt="Immagine BKS Standard"></div><form id="form-misure" action="/submit" method="post"><div id="leggenda"><h3>Leggenda</h3><p>HV: altezza vano</p><p>HA: altezza architettonica</p><p>L: Larghezza muro finito</p><p>L1: Larghezza spalla muro finito</p><p>H4: altezza esterna muro finito</p><p>H3: Sotto soglia</p><p>SS: Spessore spalla 94mm*</p><p>LA: larghezza architettonica</p><p>LV: Larghezza vano</p><p>LE: larghezza esterna</p><p>BT: battuta</p><p>Bt2: Interno battuta</p><p>SSI: Spessore spalla interno 48mm*</p><p>S4: Interno battuta</p><p>SC: Spessore cassonetto*</p><p>H1: Altezza cassonetto</p><p>H2: Altezza cassonetto lato BT</p><h3>* Misure Standard</h3></div><div class="custom-entry-group"><div class="custom-entry-azienda"><label for="nomeAzienda" id="nomeAzienda">Nome Azienda*</label><input type="text" id="nomeAzienda" placeholder="Inserisci nome azienda" required></div><div class="custom-entry-LE"><label for="LE">LE*</label><input type="number" id="LE" placeholder="Misura min: 1000" min='1000' max='3500' required></div><div class="custom-entry-H4"><label for="H4">H4*</label><input type="number" id="H4" placeholder="Misura min: 1000" min='1000' max='3000' required></div></div><div class="custom-entry-group"><div class="custom-entry-ubicazione"><label for="ubicazione">Ubicazione*</label><input type="text" id="ubicazione1" placeholder="Esempio Bagno" required></div><div class="custom-entry-BT2"><label for="BT2">BT2*</label><input type="number" id="BT2" placeholder="200" required></div><div class="custom-entry-BT"><label for="BT">BT*</label><input type="number" id="BT" placeholder="60" required></div></div><div id="risultati"><h3>Risultati:</h3><p id="risultatoLA">Larghezza Architettonica(LA): </p><p id="risultatoLV">Larghezza Vano(LV): </p></div><div id="prezzo"><h4>Prezzo = </h4><p id="prezzoRisultato">0.00 €</p></div><button type="submit" id="btn-risultato">Calcola risultato</button><button type="button" id="btn-avanti" onclick="nextSection('nodo-inferiore')">Avanti</button></form></div><div id="nodo-inferiore" class="section"><h1>Nodo Inferiore</h1><form id="form-nodo-inferiore"><button type="button" id="btn-indietro" onclick="prevSection('misure')">Indietro</button><button type="button" id="btn-avanti" onclick="nextSection('risultato')">Avanti</button></form></div><div id="risultato" class="section"><h1>Risultato</h1><form id="form-risultato"><button type="button" id="btn-indietro" onclick="prevSection('nodo-inferiore')">Indietro</button><button type="button" id="btn-avanti">Avanti</button></form></div></div></body></html>