Schriftgröße von Kästchen "Weiter" und "Befragung unterbrechen" verkleinern

Question

Wenn man meinen Fragebogen auf einem kleinen Bildschirm ausfüllt (Handy) überlappen sich die Knöpfe "Befragung unterbrechen und" Weiter".
Ich benutze das Squares Layout (und würde ungern wechseln).
Wenn ich die Schriftgröße von 14 auf 10 der Kästchen im Layout ändere ist mir der "Weiter" Knopf zu klein.
Gibt es eine Möglichkeit nur den Knopf "Befragung unterbrechen" kleiner zu stellen oder auf 2 Zeilen (also "Befragung
unterbrechen") anzeigen zu lassen?

Falls nicht, was würde denn passieren wenn ich keinen "Befragung unterbrechen" Knopf habe und die Teilnehmer dennoch unterbrechen und ihn dann nochmal ausfüllen wollen. Wird der begonnene Fragebogen gespeichert?

Vielen Dank für die Hilfe!

Comments

Könnten Sie bitte einen Pretest-Link zu dem betroffenen Fragebogen posten? Wenn nur die Knöpfe "Befragung unterbrechen" und "Weiter" aktiviert sind, dann passieren diese mit den Standard-Einstellungen des "Squares" Layouts problemlos auch auf das kleine Display eine Mobiltelefons. Daher würde ich gerne erst einmal herausfinden, welche Elemente und welcher Größe bei Ihnen noch vorkommen.

---

Der Link ist inzwischen nicht mehr gültig: Hier der aktuelle https://www.soscisurvey.de/erfahrugentuerkeistaemmigr/?act=0AyMiYkxA3THDAXpWBY9KPRh

---

Danke, Ihre Antwort war duchgerutscht, weil Sie es zunächst als "Antwort" gepostet hatten. Mit dem aktuellen Pretest-Link können wir das Problem nachvollziehen. Vermutlich wird eine kleine Änderung im Layout notwendig werden - wir melden uns zeitnah, wenn wir dafür eine gute Lösung haben.

Answer 1

Wir haben das Layout "Squares" aktualisiert, sodass es mit den Knöpfen nun besser funktioniert. Sie können auf www.soscisurvey.de das Layout löschen und neu aktivieren, um die neue Version zu erhalten.

Falls Sie im Layout manuelle Änderungen vorgenommen haben sollten, können Sie die Anpassungen wie folgt nachvollziehen. Im Layout finden Sie relativ weit unten folgenden HTML-Code:

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed">
<colgroup>
  <col width="*">
  <col width="*">
  <col width="*">
</colgroup>
<tr>
  <td style="text-align: left">%button.back%</td>
  <td style="text-align: center; font-size: 75%">%button.break%</td>
  <td style="text-align: right">%button.next%</td>
</tr>
</table>
<div style="margin-top: 8px; font-size: 80%">%button.leave%</div>

Diesen ersetzen Sie wie folgt:

<div class="s2t-buttons">
  <div class="s2t-buttons-next">%button.next%</div>
  <div class="s2t-buttons-back">%button.back%</div>
  <div class="s2t-buttons-control">
    <div>%button.break%</div>
    <div>%button.leave%</div>
  </div>
</div>

Zusätzliche fügen sie vor dem </style> noch folgendes ein:

div.s2t-buttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 1em;
}
div.s2t-buttons-back {
    order: 1;
    flex-basis: 40%;
    text-align: left;
}
div.s2t-buttons-control {
    order: 3;
    flex-basis: 100%;
    text-align: center;
    font-size: 75%;
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: center;
}
div.s2t-buttons-next {
    order: 2;
    flex-basis: 40%;
    text-align: right;
}
@media (min-width: 992px) {
    div.s2t-buttons {
        flex-wrap: nowrap;
        gap: 1em;
    }
    div.s2t-buttons-control {
        order: 2;
        flex-basis: auto;
    }
    div.s2t-buttons-back {
        flex-basis: 160px;
    }
    div.s2t-buttons-next {
        flex-basis: 160px;
        order: 3;
    }
}