How can you change the font size of labels in NPS and slider questions? | XM Community
Skip to main content
I'd like to reduce the font size the of the labels on the NPS question so it looks nicer on Mobile (using Flat layout). I'd also like to do this for a slider question.



Any tips?
You can make edits to any question label in Qualtrics by selecting the label, going to the drop down and selecting the Rich Content Editor. You can also provide the exact font size you might want using HTML by typing the HTML and the label right in the label box (instead of going to the Rich Content Editor in the drop down).

!



Or are you trying to reduce the font size of the corresponding numeric values?
@C_Bohn Thanks! This worked, but looks like it changes the font size on both desktop and Mobile. Any chance you know if there's a way to change for only Mobile?
Qualtrics uses the following to set the font size on mobile. So, you can use the same rule to override it in Look & Feel or a `<style>` tag:

```

@media (max-width:480px){

.Skin .NPS table .ColumnLabels .First, .Skin .NPS table .ColumnLabels .Last {

font-size: 14px;

}

}

```
@TomG Thanks for this! if I wanted to fix for a slider scale, is there other code I could also use?
> @jli5184 said:

> @TomG Thanks for this! if I wanted to fix for a slider scale, is there other code I could also use?



I'm sure there is. Use your browser's inspect feature to find the appropriate CSS rule.
@TomG Hm how would I locate the skin code needed for Slider questions?
> @jli5184 said:

> @TomG Hm how would I locate the skin code needed for Slider questions?



Preview the question or block, hover over the label, then right click -> Inspect. You'll be able to see the CSS rules applied to the element. You can then copy the appropriate rule selector to create your own rule in Look & Feel CSS or a style tag to override the theme.
@TomG ah thank you!! I was able to locate and tried adding this to the html view but it didn't display the question when I tried. Can you catch what is wrong? I only changed the font-size 10px



@media (max-width: 480px)

.JFEScope .RTL .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.last, .Skin .horizontalbar tr.xlabel th {

font-size: 10px;

}
> @jli5184 said:

> @TomG ah thank you!! I was able to locate and tried adding this to the html view but it didn't display the question when I tried. Can you catch what is wrong? I only changed the font-size 10px

>

> @media (max-width: 480px)

> .JFEScope .RTL .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.last, .Skin .horizontalbar tr.xlabel th {

> font-size: 10px;

> }

>



You are missing a { after max-width and a second } at the end.
@TomG hm I tried this and got an unexpected error message



@media (max-width: 480px) {

.JFEScope .RTL .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.first, .JFEScope .Skin .Slider .QuestionBody.q-slider ul li.last, .Skin .horizontalbar tr.xlabel th {

font-size: 10px;}

}



!

Leave a Reply


Terms & Conditions