Wie funktioniert die Text-Neuformatierung der Umfrage auf dem Smartphone?

Question

In der mobilen Version der Umfrage (auf dem Smartphone) ist die Vergrößerung des Textes und die damit verbundene Text-Neuformatierung nicht möglich.
Die unter dem Beitrag: https://www.soscisurvey.de/help/doku.php/de:create:smartphones veröffentlichen „Optimierungsschritte“ wurden soweit wie möglich befolgt. Durch welche Einstellung erreicht man die Vergößerung des Texts/ Text-Neuformatierung auf dem Smartphone?

Hier der Pre-Test:
https://www.soscisurvey.de/Essbare-Zukunft/?act=Daglh2w9X9MRvrRrAUvNk2if

Vielen Dank im Voraus!

Answer 1

Danke für den Pretest-Link!

Soweit ich sehe, gibt es im Layout einen kleinen Fehler, welcher eine Mindestbreite von ca. 370 Pixeln verursacht.

Bitte suchen Sie im Layout -> HTML-Code folgende Stelle:

@media (max-width: 800px) {
  div.s2t-outer { display: block; margin: 0 auto; }
  div.s2t-left {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    border-right: 0 none;
    border-bottom: 1px solid #87BB00;
    padding: 1em 30px;
  }
  div.s2t-logo img {
    max-height: 4em;
    margin: 0 3em 0 0;
  }
  div.progressbar {
    width: 100%;
    max-width: 320px;
    margin: 0 0 0 auto;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }
}

Ergänzen Sie kurz vor dem Ende folgende Definition

div.s2t-content {
    padding: 20px 16px;
    box-sizing: border-box;
}

Zusammen also:

@media (max-width: 800px) {
  div.s2t-outer { display: block; margin: 0 auto; }
  div.s2t-left {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    border-right: 0 none;
    border-bottom: 1px solid #87BB00;
    padding: 1em 30px;
  }
  div.s2t-logo img {
    max-height: 4em;
    margin: 0 3em 0 0;
  }
  div.progressbar {
    width: 100%;
    max-width: 320px;
    margin: 0 0 0 auto;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }
  div.s2t-content {
    padding: 20px 16px;
    box-sizing: border-box;
  }
}