Eigene grafische Verankerung Distanz zur Skala

Question

Ich lasse mir bei meiner Skalenfrage einen spezifischen Balken, den ich zuvor als PNG hochgeladen habe, als grafische Verankerung anzeigen.

Das funktioniert sowohl beim PC als auch am Handy, allerdings unterschiedlich gut. Am PC liegt der Balken sehr schön nahe an der Skala, beim Handy hingegen ist der Balken weit von der Skala entfernt, sodass zwischen Skala und Balken eine unschöne Fläche entsteht.

Wir kann ich die grafische Verankerung auch am Handy schön an die Skala anschmiegen lassen?

LG

Comments

Würden Sie mal einen Pretest-Link direkt zur betroffenen Seite posten? Dann sehen wir uns an, wo der Abstand her kommt.

---

Danke für die rasche Antwort. Anbei der Pretest-Link zu einer der betroffenen Seiten: https://sosci.makam.at/ttt/?act=eY7kfoyD0ReH75PYJ7HdktWw

Grundsätzlich tritt dieser Effekt nicht nur bei dieser Seite, sondern bei allen Skalenfragen auf.

PS: bitte die replace-Fehlermeldung einfach ignorieren

Answer 1

Soweit ich sehe, wurde im Layout ein wenig CSS-Code ergänzt - darunter auch folgender Abschnitt, welcher den Abstand verursacht:

@media (max-width: 760px) {
	div.s2item div.s2options, div.s2item div.s2dk {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-top: 0 !important;
		max-width: 100vw !important;
		height: 64px !important;
	}
	span.right_scala {
		right: 0px;
	}
}

Spezifisch die Zeile

height: 64px !important;

Ich vermute, dass das irgendwo schon beabsichtig und sinnvoll ist - entsprechend könnten Sie den Balken durch folgende Ergänzung folgt ausnehmen:

div.s2item div.s2options.s2wedge {
  height: auto !important;
}

Comments

Ja, in der Tat hat unser IT-ler das Layout mit CSS-Code ergänzt. Da er nun leider zwei Wochen nicht verfügbar ist, habe ich mich mit meiner Frage an Sie gewendet :)

Vielen Dank für die Adaptierung des Codes. Das scheint das Problem gelöst zu haben!

---

Darf ich Ihnen gleich eine zweite Frage zum Layout stellen:

Das Layout verhält sich bei bestimmten Fragetypen (EFN, Offen) auf Android leicht anders als auf iOS.

Die Weiter- und Zurückknöpf sind auf Android vollständig sichtbar und gut klickbar. Auf iOS hingegen kann man nicht komplett runter scrollen, sodass das Anklicken erschwert ist.

Gibt es eine Stelle im Code, an der ich das ändern kann?

Hier ein Pretest-Link zu einer Seite mit EFN: https://sosci.makam.at/ttt/?act=2V3I4IKC7vANwqAE2EoTm1NF

Danke und LG

---

Auf den ersten Blick würde ich sagen, dass es daran liegt, dass die dunkelgraue Fußzeile zu weit nach oben ragt - die liegt ja über der Seite, und wenn unten nicht genug Weißraum eingeplant ist, dann verdeckt sie Inhalt. Also z.B. den Weiter-Knopf.

Ich persönlich würde einmal versuchen, im Layout die CSS-Definition

div#s2t-content {
    width: unset;
    margin: 0px 10px;
}

wie folgt abzuändern:

div#s2t-content {
    width: unset;
    margin: 0 10px 40px;
}

---

Tausend Dank, das hat das Problem gelöst!

Nun ist eine weitere Thematik aufgetreten, wieder in Bezug auf den Balken, diesmal bei der Darstellung am Tablet (wir wissen von Android, unklar ob auch auf iOS):

Im Hochformat am Tablet ist der farbige Balken sichtbar, sobald man das Tablet auf Querformat dreht verschwindet die Linie.

Anbei wieder ein Pretest-Link zu einer der Skalenfragen mit dem Balken:

https://sosci.makam.at/ttt/?act=9qWzPuswoZ3M1SElkynkuXY9

Vielen Dank im Voraus!