Themenbereich: Umfrage aufbauen

CSS-Editor


Der CSS-Editor ermöglicht Ihnen weitergehende Optimierungen an dem Umfrage-Layout vorzunehmen. Sie können damit nahezu jedes Element noch individueller gestalten.

Nachfolgend ein paar Beispiele, wie Sie mit dem CSS-Editor Eigenschaften ändern:
 

Logo Größe verändern
 
.logo-container { max-height: 100px;}
.logo-wrapper > img { max-height: 100px;}
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Um die Größe des Logo-Containers zu ändern, erhöhen oder verringern Sie die Pixel-Werte (100px).
 

Schriftgrößen verändern
 
p { font-size: 16px; }
.surveytitle h2 { font-size: 26px; font-weight: normal; }
.page-title h3 { font-size: 18px; font-weight: normal; }
.questiontitle p { font-size: 22px; }
.questionCount p { font-size: 14px; }
.question-numbering { font-size: 14px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Um die Größe der einzelnen Schriften zu verändern, kopieren Sie den jeweiligen Code und verändern Sie die Pixel-Werte der Schirften (z.B. 26px).
 

"OK"-Button aus der Umfrage entfernen
 
.next-question-button { display:none; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Wenn der OK-Button generell aus der Umfrage entfernt/ausgeblendet werden soll, dann nutzen Sie diesen Code.
 

Weiße Hinterrgundfläche
 
.content-container {background-color: #ffffff;padding: 0 40px 40px 40px;max-width: 1060px;}

@media (max-width:767px) {
.content-container {padding: 0 5px 40px 5px;}
}
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Mit diesem Code erstellen Sie hinter den Fragen, mittig auf der Seite, eine weiße Hintergrundfläche. Optional können Sie auch die weiße Farbe anpassen. Dazu einfach den Hexadezimalwert "#ffffff" gegen einen anderen austauschen.
 

Abstand zwischen den Fragen verringern
 
.table-space { height: 100px; }
.table-space-small { height: 60px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Wenn Sie die Abstände zwischen den Fragen und Elementen verändern möchten, dann nutzen Sie diesen Code und verändern die Pixel-Werte (100px).
 


Spezielle CSS-Anpassungen für verschiedene Bildschirmauflösungen

Mit der automatischen Anpassung auf kleinere Bildschirme (Tablet & Smartphone) wird das Umfrage-Layout der jeweiligen Größe angepasst. Wenn Sie nun über den CSS-Editor Anpassungen vornehmen, wirken sich diese auch auf die optimierte Darstellung für kleine Bildschirme aus und können zu unerwünschtem Verhalten führen.
Um dies zu verhindern, können Sie mit speziellen CSS-Befehlen Anpassungen nur auf bestimmte Bildschirmauflösungen ausrichten.

Beispiel:
In der normalen (Desktop-)Ansicht möchten Sie das Logo um 50px vergrößert anzeigen. Sobald die Umfrage auf einem Tablet aufgerufen wird nur noch um 20px, und wenn die Umfrage auf einem Smartphone aufgerufen wird, soll sich das Logo kleiner als normal angezeigt werden

In diesem Fall sieht der CSS-Code folgendermaßen aus:
 
.logo-container { max-height: 150px;}
.logo-wrapper > img { max-height: 150px;}

@media (max-width:767px) {
    .logo-container { max-height: 120px;}
    .logo-wrapper > img { max-height: 120px;}
}

@media (max-width:360px) {
    .logo-container { max-height: 80px;}
    .logo-wrapper > img { max-height: 80px;}
}
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)


Hinweis
Jede Eingabe kann zu Fehlern führen für die wir keine Haftung übernehmen. Lassen Sie sich bei speziellen Änderungen beraten oder von einem Experten helfen.