Adjust Row Header and Slider Width in Slider List Questions

The Slider List question was built to accommodate relatively short row headers. If you find that you need to adjust the width of either the row header or the slider to accommodate your row header text you can do so with a little CSS!

Place the below CSS code in your survey theme. To do so go to the Style tab and scroll to the bottom of the survey preview to access the link for the HTML/CSS Editor. CSS code should be placed on the Custom CSS tab.

To reduce the width of the slider use the below CSS. We've reduced the left margin to 245px. You can also reduce the right margin.

.sg-slider-box {
margin-left: 245px;
margin-right: 15px;
}

To increase the width of the row header use the below CSS. We've increased the width to 150%.

.sg-slider-row-label-inner {
width: 150%;
}

Finally, if you would like to gain a touch more room you can pull the row headers to the left use the below CSS.

.sliderwidth .sg-question-options {
padding: .3em 1em 1em 0em;
}

Next, edit your Slider List question and go to the Layout tab and enter sliderwidth the CSS Class Name field.

Before CSS:

Once this CSS has been applied to the theme:

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In