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>