Abstand bei Auswahlfrage zwischen Spalten reduzieren

Question

Hallo :) Ich möchte gerne bei einer einfachen Auswahlfrage mit 2 Reihen a 3 Spalten den Abstand zwischen den Spalten verringern. Aktuell habe ich pro Item ein Bild eingefügt, das die Spalte aber nicht ganz ausfüllt, sodass eine große Lücke zwischen den Bildern entsteht. Kann ich den Abstand der Spalten reduzieren? Oder sonst eine einzelne Frage im Fragebogen kleiner machen?

Außerdem würde ich die Frage gerne mittig platzieren, statt links anzuordnen.

Danke schonmal!

Comments

Standardmäßig verwendet die Auswahlfrage bei der mehrspaltigen Darstellung die gesamte Breite - aber das lässt sich mit ein wenig CSS ändern. Möchten sie einen Pretest-Link direkt (!) zur der Fragebogenseite mit der Frage erstellen und posten? Dann kann ich das gerne konkretisieren.

Vermutlich ist die CSS-Anpassung übrigend einfacher, wenn Sie die Reihenfolge der Kärtchen bei den Spalten auf "zeilenweise" statt "spaltenweise" einstellen - das erleichtert auch das zentrieren.

---

Ja klar, gerne! Hier ist der Link direkt zu der Frageseite: https://www.soscisurvey.de/Confidence/?act=QAwJ713p3nT0dYH2AiXxWVqR

Ich schwanke noch zwischen zwei Darstellungsformen. Bei der oberen Variante hätte ich gerne den Abstand zwischen den Bildern verringert, sodass bei einer Auswahl eines Bildes der Rahmen direkt um das Bild herum ist. Bei der unteren Variante wär's gut, wenn die Buttons neben dem Text stünden — das geht aber vermutlich nur, wenn man Text und Bild linksbündig und nicht mittig (aktuell mit text-align: center) platziert? Wenn man alles im Items selbst  linksbündig platziert, kann man dann aber die Frage mittig auf die Seite packen?

Danke schonmal :)

Answer 1

Mit folgendem PHP-Code werden die Kästchen der oberen Frage auf die Bildbreite angepasst - allerdings rücken dann alle Bilder erstmal nebeneinander:

pageCSS('
    #PG08_tab div.dynamic div.place {
      flex-basis: auto;
    }
');

Deshalb müssten Sie die Gesamtbreite noch begrenzen und die Box zentrieren:

pageCSS('
    #PG08_tab div.dynamic div.place {
      flex-basis: auto;
    }
    #PG08_qst {
      max-width: 600px;
      margin: 0 auto;
    }
');

Comments

Super, das klappt, vielen Dank!

Wäre es denn bei der Darstellung mit Buttons auch möglich, die Buttons an den Text zu rücken bzw. die Frage zu zentrieren?

---

Nevermind, das habe ich schon hinbekommen. Ich hätte aber noch eine letzte Frage: Könnte man die unterste Option (Nein, keine dieser Personen war dabei) auch statt in einer neuen Zeile rechts neben die Bilder packen? Aktuell geht das ja nur, wenn man 4 Spalten einstellt und das Item 4 quasi leer lässt. Das Problem ist dann aber, dass man Item 4 noch anklicken und so einen ungültigen Wert produzieren kann. Ginge es, dass man ein einzelnes Item, also eine einzelne Antwortalternative, deaktiviert, damit die VP das nicht anklicken können?

---

Das Problem ist, dass das Layout für Smartphone-Displays oder für Tablets flexibel bleiben muss. Wenn keine 3 Bilder nebeneinander passen, dann werden nur 2 pro Zeile angezeigt. Ich würde da nicht zu viel anpassen.

---

Ne, tatsächlich schließen wir eine Teilnahme über Smartphone und Tablet aus!

---

Nun, Sie können die Dummy-Option schon einfügen und dann per CSS dafür sorgen, dass sie nicht klickbar ist (pointer-events: none;) und unsichtbar (visiblity: hidden).

Die Optionen enthalten jede ihre eigene HTML-ID, z.B.

PG08_04_container

anhand derer man sie ansprechen kann

#PG08_04_container {
  pointer-events: none;
  visiblity: hidden;
}