Erweiterung des obigen Kommentars

Question

Anbei noch ein Bild zur besseren Darstellung

Answer 1

Sie haben da ziemlich viele

in Ihrem HTML-Code. Und dabei auch ein <div class="progress">, was insofern riskant ist, als der Forschrittsbalken auch diese CSS-Klasse verwendet. Und der Fortschrittsbalken verwendet eine recht kleine Schrift.

Es wäre also naheliegend, dass irgendwo das korrekt

am Ende der Zeile fehlt (das sehe ich im Screenshot nicht), sodass die HTML-Struktur nicht mehr stimmt und die kleine Schriftart aus dem "progress"-DIV für Inhalte auf der Seite wirkt, auf die es gar nicht wirken sollte.

Wenn Sie möchten, dann posten Sie einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite, dann kann ich diese Hypothese validieren. Wenn Sie das nicht möchten, dann verwenden Sie selbst bitte die Browser-Konsole, um die HTML-Struktur der Seite zu untersuchen und zu prüfen, woher die kleine Schriftart kommt.

Comments

Ich habe mal eine gekürzte Version des Experiments erstellt. Alle Codes sind jedoch weiterhin enthalten.

Hier ein Pretest-Link zu einer beispielhaften Seite:
https://survey.ise.tu-darmstadt.de/helpinvocation/?act=5jncZN0V310Tc39rraCt16QI

---

Danke für den Pretest-Link ... die Fragen CO29 und WH30, um die es laut Ihrem Screenshot oben geht, scheinen auf der Seite nicht enthalten zu sein?

---

Vielen Dank für die schnelle Antwort.

DIe Fragen des Pretests-Links CO37 und WH37 entsprechen dem gleichen Format wie CO29 und WH30 - es sind alle Seiten mit diesem Typ im selben Format aufgebaut. Leider ist die Schriftgröße der Fragen des Typs WHXX im mobilen Design kleiner als die des Typs COXX.

---

Danke für die Erklärung. Es war etwas schwieriger, das Problem einzugrenzen. Ursache für die unterschiedlichen Schriftgrößen ist eine Browserseitige "Optimierung" der Seite. Warum meint der Browser, das sei notwendig? Weil Sie im CSS folgende Definition hinterlegt haben:

body { background-color: #FFFFFF; padding: 1.563em; padding-top: 4.688em; padding-left: 9.375em; padding-right: 9.375em; }

Das sind - gemessen an dem kleinen Display - gigantische Innenabstände (padding) für die Seite. Und würde der Browser hier nicht optimieren, müsste der Fragebogen in einen schmalen Streifen in der Mitte des Displays passen.

Bitte entfernen Sie den o.g. CSS-Code (wieder) aus dem Layout.

---

Vielen Dank für den Tipp.

Tatsächlich war dies nicht die Hauptursache. Das mobile Design hat die ganze Zeit funktioniert. Die mobile Ansicht wurde mir über das Entwicklertool in der Desktopansicht nicht identisch zur mobilen Ansicht angezeigt, die sich ergeben hat, wenn man die Study direkt auf dem Handy öffnet.

---

Ja, das ist korrekt. Die Mobil-Simulation der Browser "optimiert" nicht immer genauso wie die Browser auf den Geräten. Das war auch einer der Gründe, warum das Problem schwieriger einzugrenzen war :)

Funktioniert es nach der o.g. Korrektur jetzt oder haben Sie weiterhin Probleme mit der Darstellung?