Horizontale Auswahl in mobiler Ansicht zu breit

Question

Liebes Support-Team,
ich habe Probleme mit dem Fragetyp Horizontale Auswahl in der mobilen Anzeige. Als ich den Fragebogen vor ein paar Wochen mit dem Handy getestet habe, hat Sosci automatisch in die vertikale Darstellung umgestellt und die Antwortoptionen haben genau die Breite meines Bildschirms eingenommen, aber nicht mehr (s. Screenshot 1). Damit war ich sehr zufrieden. Gestern habe ich den Fragebogen nochmal getestet und da hat Sosci zwar auch in die vertikale Darstellung umgestellt, aber irgendwie sind die Antwortoptionen jetzt viel breiter als der Bildschirm, wenn man nicht rauszoomt, sodass ca. die Hälfte abgeschnitten ist (s. Screenshot 2). Ich kann mir nicht erklären woran es liegt, weil ich in der Zwischenzeit (soweit ich mich erinnern kann) nichts mehr an den Fragen selbst geändert habe. Haben sie eine Idee, warum sich die Darstellung in der mobilen Ansicht verändert hat und wie ich das Problem lösen könnte?
Liebe Grüße und schonmal vielen Dank!

Answer 1

Konnten Sie wohl bitte einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite erstellen und posten? Dann lässt sich das schnell klären.

Meine Vermutung wäre, dass der Artikel über der Auswahl breiter ist als das Display und dadurch die Gesamtbreite der Seite und damit der Auswahlfrage verändert.

Wahrscheinlich reicht es ein style="max-width: 100%" im <img>-Tag des Stimulus zu ergänzen.

Comments

Vielen Dank für die schnelle Antwort!
Hier ist ein Pretest Link:
https://www.soscisurvey.de/pretestMA24/?act=dhTL3WEIpYveRZiTQLB6aLO1

Und folgenden Code habe ich für den Textbaustein mit dem Stimulus:
 <div class="news-container">
    <img src="pro://Stethoskop800x800.jpg" class="news-image">
    <div class="news-text">
        <h2>Keine Arbeitsgenehmigung trotz Ärztemangel</h2>
        <h1>Syrischer Arzt kämpft verzweifelt gegen deutsche Behörden: „Möchte einfach nur arbeiten“</h1>
    </div>
</div>

<style>
    .news-container {
        display: flex;
        margin-bottom: 45px; /* Fügt den gewünschten Abstand nach unten hinzu */
    }

    .news-image {
        max-width: 33%;
        margin-right: 15px;
    }

    .news-text {
        text-align: left;
    }

    .news-text h1 {
        line-height: 1.2;
    }

    .news-text h2 {
        color: #FF0000;
    }

    @media (max-width: 600px) {
        .news-container {
            flex-direction: column;
        }

        .news-image {
            max-width: 50%;
            margin-right: 0;
            margin-bottom: 10px;
        }

        .news-text {
            width: 100%;
        }
    }
</style>

---

Danke für den Pretest-Link. Auslöser für die überbreite Darstellung war, dass in der Frage eine Breite von 700 Pixel eingestellt war. Dies sollte aber eigentlich eine Maximalbreite sein und die Breite auf kleinen Displays nicht unnötig erhöhen. Wir haben das korrigiert.

Falls Sie die Breite auf großen Displays nicht beschränken möchten, möchten Sie diese Einstellung vielleicht aus der NC01 u.a. entfernen.

---

Ja super jetzt funktioniert es wieder. Herzlichen Dank für die schnelle und kompetente Hilfe!