Abstand zwischen zwei Fragen verkleinern

Question

Lieber Online-Support,
ich möchte gerne den Abstand zwischen meinen beiden Fragen (die emoji skala und "keine reaktion") verkleinern, damit es zusammen auf dem Smartphone angezeigt wird und man nicht scrollen muss, um die zweite Skala zu sehen. Ich habe versucht über das Layout den Abstand zwischen den Fragen zu verkleinern, aber das hat leider nicht geholfen.

Eigentlich wäre es optimal, wenn die Option "keine Reaktion" auch ein Item der vorigen Frage wäre. Ich habe es leider nicht hinbekommen es dazu zufügen, weil es sonst auf dem Smartphone viel zu klein dargestellt wurde und man es nicht lesen konnte. Deshalb war eine weitere Frage zu erstellen ohnehin mein Umweg (nur kurz zur Erklärung warum ich diesen umständlichen Weg gegangen bin).

hier der Link zum Pretest:
https://www.soscisurvey.de/fbbeschwerde/?act=LTqZHRgqI07OCd7XtYE2r4L3

Vielen Dank im Voraus!

Answer 1

Danke für den Pretest-Link. Wenn ich es korrekt sehe, haben Sie in der Frage EM03 eine fixe Höhe von 200 Pixeln vorgesehen - die Emojis füllen nur einen kleinen Teil davon aus.

Ich habe nicht genau verstanden, wie die Frage funktionieren soll - Sie scheinen eine AUswahlabfolge aber nur mit einer Teilfrage erstellt zu haben. Für eine einzelne Frage wäre die "normale" Auswahl mit Darstellungsvariante "Kärtchen" evtl. besser geeignet. Da könnten Sie dann einfach angeben, dass Sie 6 Optionen + eine Ausweichoption haben. Und die Kästchen kann man bei Bedarf auch noch weglassen.

Comments

Schon besser :)

Jetzt benötigen wir noch ein wenig CSS-Code für die korrekte Darstellung:

pageCSS('
  .s2iSelection.cards.js div.option > div.label { padding: 0; }
  .s2iSelection.cards div.option { background-color: transparent; border: 0 none; }
  .s2iSelection.dynamic div.option { padding-top: 0; padding-bottom: 0; }
  div#EM04_tab img { width: 30px; }
');

---

Oh Danke! Das sieht perfekt aus!

---

Naja, wird schon langsam. Ergänzen Sie doch die vorletzte Zeile bitte noch ein wenig:

  div#EM04_tab img { width: 30px; display: block; margin: 3px auto; }

Und beim Itemtext für "keine Reaktion" würde ich folgendes empfehlen:

<div style="margin: 4px; text-align: center">keine Reaktion</div>

---

Ist der auch möglich nur die Ausweichoption "keine Reaktion" grau zu hinterlegen. So wäre es in der mobilen Ansicht deutlicher, dass dies auch eine Reaktion ist. Ich habe es nur geschafft alle Auswahlfelder grau zu hinterlegen und scheitere daran nur die Ausweichoption grau zu hinterlegen.
Hier noch einmal der Pretest Link:
https://www.soscisurvey.de/fbbeschwerde/?act=8cmWQGguan1ehNbraeNRAbhq

Vielen Dank!

---

Naja, ich hatte ja ohnehin schon ein DIV um die Ausweichoption empfohlen. Das können Sie problemlos auch mit einem grauen Hintergrund versehen:

<div style="padding: 4px; text-align: center; background-color: #CCCCCC; border: 2px solid #999999;">keine Reaktion</div>