The CSS editor enables further optimizations to the survey layout. It allows to customize every element even more individually.

Here are a few examples to change settings via the CSS editor:

Change logo size

.logo-container { max-height: 100px;}
.logo-wrapper > img { max-height: 100px;}

(Copy the code and paste it in the CSS Editor.)

To change the size of the logo container, increase or decrease the pixel values (100px).

Change font sizes

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; }

(Copy the code and paste it in the CSS Editor.)

To change the size of each font, copy the corresponding code and change the pixel values of the fonts (e.g. 26px).

Disable "OK" button in the survey

.next-question-button { display:none; }

(Copy the code and paste it in the CSS Editor.)

If you want to remove/hide the OK button from the survey in general, use this code.

White background container

.content-container {background-color: #ffffff;padding: 0 40px 40px 40px;max-width: 1060px;}

@media (max-width:767px) {
.content-container {padding: 0 5px 40px 5px;}
}

(Copy the code and paste it in the CSS Editor.)

With this code you create a white background area behind the questions, centered on the page. Optionally, you can customize the color. To do this, simply replace the hexadecimal value "#ffffff" with another one.

Change distance between questions

.table-space { height: 100px; }
.table-space-small { height: 60px; }

(Copy the code and paste it in the CSS Editor.)

If you want to change the spacing between the questions and elements, use this code and change the pixel values (100px).

Custom CSS adjustments for different screen resolutions
With the automatic adjustment on smaller screens (tablet & smartphone), the survey layout automatically adjusts to each size. If you make adjustments on the CSS editor now, these affect the optimized presentation for small screens and can lead to unwanted results.
To prevent this, you can set specific CSS commands only for specific screen resolutions.

Example:
In the normal (desktop) view you want to display the logo enlarged by 50px. Once the survey is called on a tablet only by 20px, and when the survey is called on a smartphone, the logo should display smaller than normal

In this case, the CSS code looks like this:

.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;}
}

(Copy the code and paste it in the CSS Editor.)

Note
Each input can lead to errors for which we assume no liability. Seek advice or help from an expert.