If you wish to tweak your survey style with CSS, here are few ready-made snippets you can just copy-paste to the CSS editor in the Design view. CSS editor is behind the </> button in the Style section.
You can for example use following CSS snippets to edit the survey.
Adjust column width wider in Scale- and Table-elements
.element .table.scale .td.block { width: 40%; }
If you want to adjust the question column narrower, change the width value to be between 50%-90%.
If only one element needs to be modified, use targeted CSS below.
.element[elementname="p0e0"] .table.scale .td.block { width: 40%; }
p0e0 is the location of the element on the survey form. First page first element in the CSS-example. Calculate pages 'p' from zero and elements 'e' on each page from zero. Include images and text elements to the calculations. More information here.
Adjust vertical spacing between elements
.element { margin-bottom: 100px; }
Align all elements' titles to the center
.element h1, .element h3
{
text-align: center;
}
Change image selection element's image size
.element .imageselection.options .option > .image:not(.empty) { padding-top: 50%; background-size: contain !important; }
Change column's color in scale and table elements
.tr.statement .tr.options .td:nth-child(3)
{
background-color: red;
}
Vary the number inside round brackets to change column. If you wish to use the color only in one scale or table element, use code below.
div[elementname="p0e0"] .tr.statement .tr.options .td:nth-child(2)
{
background-color: red;
}
p0e0 is the location of the element on the survey form. First page first element in the CSS-example. Calculate pages 'p' from zero and elements 'e' on each page from zero. Include images and text elements to the calculations. More information here.
Change single choice element radio button size
If you like to change single choice radio button size, you can do it with this snippet. Just change width and height values and also match border-radius for new size.
.element .options .field.radio {
width: 24px;
height: 24px;
border-radius: 100%;
}
.element .options .field.radio label:after {
width: 16px;
height: 16px;
}
Remove a navigation button from the survey form
CSS code example:
.page-container .controls button[class~="returnsubmit"]
{
display: none;
}
Replace returnsubmit from example with right button class name listed below:
save = button for saving and continuing later in the middle of the survey. Shows up when survey has been sent via email invitation
submit = button on the last page for submitting answers
next = button for moving forward in the survey
prev = button for moving back in the survey
returnsubmit = button visible on “thank you” page. Shows up when survey has been sent via email invitation
Narrow down number scale element width
@media (min-width: 768px) {
.element.eimagescale .options, .element.eimagescale div .extremes
{
width: 70%; margin: auto;
}}
Adjust the percent after width to change the width of the number scale buttons are allowed to take.
CSS above will affect all number scale elements in the survey. If you want to adjust width for just one, specify the element in question:
@media (min-width: 768px) {
.element[data-elementname="p0e0"].eimagescale .options, .element[data-elementname="p0e0"].eimagescale div .extremes
{
width: 70%; margin: auto;
}}
p0e0 is the location of the element on the survey form. First page first element in the CSS-example. Calculate pages 'p' from zero and elements 'e' on each page from zero. Include images and text elements to the calculations. More information here.