Lässt sich der Zeilenabstand für Fragetexte in der mobilen Ansicht verringern?

Ja, das ist durchaus möglich. Um den Zeilenabstand von Fragetexten in der mobilen Ansicht zu verringern, benötigen Sie folgenden CSS-Code für Ihre LamaPoll-Umfrage:

@media screen and (max-width: 767px) {
.thV5 .poll-page .question-text-container h2.question-text-wrapper {
line-height:0.8
}
}

Kopieren Sie diesen Code und klicken anschließend auf den Menüpunkt „CSS“. Kopieren Sie den Code jetzt in das Fenster und speichern anschließend.

Abb. 1 – Klicken Sie auf den Menüpunkt „CSS“ und kopieren den Code in das entsprechende Fenster.

Sie können den Abstand über „line-height“ jederzeit ganz individuell anzupassen – ihn also entweder verkleinern oder bei Bedarf vergrößern. Ändern Sie dazu einfach die Zahl im CSS-Code. Je größer die Zahl ist, desto größer wird auch der Zeilenabstand.

3 Beispiele für verschiedene Zeilenabstände in der mobilen Ansicht

1.) Standard-Abstand

Für einen normalen, standardmäßigen Abstand nutzen Sie am besten „line-height:1.2“ (siehe Abbildung 2). Haben Sie jedoch einen längeren Fragetext, nimmt dieser in der mobilen Ansicht unter Umständen schon zu viel Platz weg.

@media screen and (max-width: 767px) {
.thV5 .poll-page .question-text-container h2.question-text-wrapper {
line-height:1.2
}
}
Abb. 2 – Fragetext mit Zeilenabstand „1.2“.

2.) Verringerter Abstand

Um den Abstand Ihrer Fragetexte zu verringern und dabei dennoch eine gute Lesbarkeit zu gewährleisten, raten wir Ihnen zu einem Abstand von „0.8“ (siehe Abbildung 3).

@media screen and (max-width: 767px) {
.thV5 .poll-page .question-text-container h2.question-text-wrapper {
line-height:0.8
}
}
Abb. 3 – Fragetext mit Zeilenabstand „0.8“.

3.) Vergrößerter Zeilenabstand

Wollen Sie den Zeilenabstand hingegen erweitern und mehr Platz zwischen den Zeilen schaffen, dann wählen Sie eine größere Zahl als „1.2“ für den line-height-Befehl. In Abbildung 4 sehen Sie beispielhaft einen Abstand von „2.2“.

@media screen and (max-width: 767px) {
.thV5 .poll-page .question-text-container h2.question-text-wrapper {
line-height:2.2
}
}
Abb. 4 – Fragetext mit Zeilenabstand „2.2“.

Im Übrigen haben Sie auch die Möglichkeit, den Zeilenabstand von Textelementen innerhalb Ihrer Online-Umfrage anzupassen und sich somit nicht nur auf die mobile Ansicht zu beschränken. Hierzu müssen Sie den „line-height“-Befehl direkt in den Quellcode des entsprechenden Elements einfügen. Eine genaue Anleitung dazu finden Sie hier: Zeilenhöhe bei Textelementen anpassen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert