Polaritätenprofil Ansicht Smartphone passt nicht

Question

Hallo liebes Team,

leider werden bei mir beim Polaritätenprofil alle Fragen auf dem Handy nicht schön angezeigt. Wie kriege ich das besser hin?
https://www.soscisurvey.de/BewertungProdukte/?act=uO3WqUbUEjaeARORQiENcPnm

Danke!

Comments

Können Sie freudlicherweise bitte einen Link posten, der direkt (!) zur betroffenen Seite im Fragebogen führt? Danke.

---

https://www.soscisurvey.de/BewertungProdukte/?act=1JP7uejGmRN54cuZA7qtw3dD

Das ist eine der betroffenen Seiten (bis S. 15). Muss ich alle betroffenen Seiten schicken?
 Danke!

Answer 1

Danke für den Pretest-Link. Bitte ergänzen Sie auf der Seite folgenden CSS bzw. PHP-Code:

pageCSS('
  #BW04_tab.s2items.slim div.s2input div.s2scale {
   max-width: 100%;
  }
  #BW04_tab div.s2series.numbering {
    width: auto;
  }
');

Wenn es noch weitere Seiten betrifft, fügen Sie den Code mit jeweils angepasster Frage-Kennung dort auch ein. Wir prüfen derweilen, was da schief läuft...

Comments

Ich habe den Code nun auf der S.4 eingefügt, leider sehe ich keine Veränderung.
Ich habe auch extra eine Version für das Smartphone erstellt.
Es sieht genauso aus wie vorher.

---

> Ich habe auch extra eine Version für das Smartphone erstellt.

Tun Sie das bitte nicht. Das ist nur dann sinnvoll, wenn Sie Fragen auf dem Smartphone austaschen oder die Seiten anders anordnen möchten.

Aber ich sehe das Problem ... der Fragebogen bindet die CSS-Befehle in der falschen Reihenfolge ein. Ändert sich etwas, wenn Sie den PHP-Code ans Ende der Seite stellen?

Falls nicht, hilft der Vorschlaghammer des CSS: !important

pageCSS('
  #BW04_tab.s2items.slim div.s2input div.s2scale {
   max-width: 100% !important;
  }
  #BW04_tab div.s2series.numbering {
    width: auto !important;
  }
');

---

Danke. Leider sind die beiden Pole "niedrige Qualität" "hohe Qualität" noch immer nicht ganz links und rechts. Die stehen beide über der 2 und der 5, was leider sehr missverständlich aussieht.

---

Das bekommen Sie mit folgender Ergänzung innerhalb des pageCSS() noch angepasst:

@media (max-width: 700px) {
  #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarLeft {
    text-align: left;
  }
  #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarRight {
    text-align: right;
  }
}

---

Also, ich muss es so:
pageCSS('
(max-width: 700px) {
   #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarLeft {
     text-align: left;
   }
   #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarRight {
     text-align: right;
   }
 }

Einfügen? (das funktioniert nicht)

Oder zusätzlich unter das, was Sie vorher geschrieben haben?
so:
pageCSS('
   #BW04_tab.s2items.slim div.s2input div.s2scale {
    max-width: 100% !important;
   }
   #BW04_tab div.s2series.numbering {
     width: auto !important;
@media (max-width: 700px) {
   #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarLeft {
     text-align: left;
   }
   #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarRight {
     text-align: right;
   }
  ');
(da passiert nichts)
Tut mir leid, ich weiß leider nicht genau, wo ich das dann einfügen muss, damit es funktioniert.
Danke für die Hilfe!

---

Beides gemeinsam, aber bitte keine Klammern verlieren:

pageCSS('
  #BW04_tab.s2items.slim div.s2input div.s2scale {
   max-width: 100% !important;
  }
  #BW04_tab div.s2series.numbering {
    width: auto !important;
  }
  @media (max-width: 700px) {
    #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarLeft {
      text-align: left;
    }
    #BW04_tab.s2items.slim div.s2aboveLabels > div.s2polarRight {
      text-align: right;
    }
  }
');

---

Super, vielen Dank!! Jetzt sieht es perfekt aus.
Und für die anderen Variablen muss ich jeweils nur das BW04 ändern, richtig?

---

Für die nächste Seite (genauso eingefügt) sieht das leider wieder wie ganz am Anfang aus. Muss ich hier etwas beachten?
https://www.soscisurvey.de/BewertungProdukte/?act=ztcfXR9aBuFUqVK6eqQmSGFb

pageCSS('
   #BW05_tab.s2items.slim div.s2input div.s2scale {
    max-width: 100% !important;
   }
   #BW05_tab div.s2series.numbering {
     width: auto !important;
   }
   @media (max-width: 700px) {
     #BW05_tab.s2items.slim div.s2aboveLabels > div.s2polarLeft {
       text-align: left;
     }
     #BW05_tab.s2items.slim div.s2aboveLabels > div.s2polarRight {
       text-align: right;
     }
   }
 ');

---

Soweit ich erkennen kann (danke für den Link) ist die Kennung der Frge nicht BW05, sondern BW09. Wenn Sie ohnehin das !important verwenden, kann auch folgendes funktionieren (bitte mal testen):

pageCSS('
   .s2items.slim div.s2input div.s2scale {
    max-width: 100% !important;
   }
   div.s2series.numbering {
     width: auto !important;
   }
   @media (max-width: 700px) {
     .s2items.slim div.s2aboveLabels > div.s2polarLeft {
       text-align: left  !important;
     }
     .s2items.slim div.s2aboveLabels > div.s2polarRight {
       text-align: right  !important;
     }
   }
 ');