Increasing font size of the grid numbers (not the text label) on slider questions | XM Community
Solved

Increasing font size of the grid numbers (not the text label) on slider questions


I'm trying to change the font size of the grid numbers (not the text label) on my slider questions. Currently, it looks like below when I preview the block:
Screen Shot 2020-04-24 at 7.23.44 PM.pngAs can be seen, the grid numbers are much too small compared to the text labels.
Is there a CSS code I can enter to make the numbers larger on these particular set of slider questions?
Any help would be much appreciated!
Thank you.

icon

Best answer by TJUH_Kai 28 April 2020, 19:11

View original

10 replies

Userlevel 3
Badge +2

Try this:
in Look & Feel, Style, Custom CSS
.labes-container .numbers li{
  font-size: 20px;
}

Increasing font size of the grid numbers (not the text label) on slider questionsThanks so much for the code. Not sure why, but this doesn't seem to work either.
I tried with other 'themes' too, thinking the particular one I'm using is not allowing custom code, but didn't have luck that way either.
Just to make sure I did it correctly - would I just paste the code on the "new" Look & Feel - Style - Custom CSS?

Userlevel 7
Badge +22

TJUH_Kai' s css is correct, it just got the spelling mistake in labels:
.labels-container .numbers li{
  font-size: 20px;
}

Userlevel 3
Badge +2

good catch rondev , Sorry JHKim , try again with the above solution.

TJUH_Kai and rondev, thanks so much for the comments.
I actually had tried the code with the correct spelling (thought it might have been a mistake) and it still didn't work. So I tried different theme settings and I think it might have been because of that the code wasn't working: I was using one of the 'Dynamic Themes' ("collection of styles that can be applied to any layout to maintain a consistent look or branding") in the NEW 'Look and Feel.'
So, I went back to the 'Old Editor,' chose a different theme, and THERE the code worked (Advanced - + Add custom CSS).
Would you guys know if it is only under the OLD Look and Feel editor that allows custom CSS to over write the theme settings? (i.e., if the dynamic themes under new look & feel editor doesn't allow custom CSS/it to over write?) Or would you know a way to do this too under dynamic themes as well?
Thanks again for your help!

Userlevel 3
Badge +2

.labels-container .numbers li{
  font-size: 20px !important;
}

Try this

Increasing font size of the grid numbers (not the text label) on slider questionsTJUH_Kai, it works!
This is great! Thanks so much. Saved me from having to consider and try so many other different options.

Badge

Hi, I have this same issue and tried this code but it isn't working for me. I tried in both the old and new Look & Feel editors with no luck. Any ideas what might be causing this? I have another bit of CSS code in there already (to not display the language dropdown menu) - do I have to add something other than a blank line between code entries? (Sorry, new to CSS!)

Badge +5

Like jcox3 I could not make this work with the suggested CSS, but TomG's javascript solution on this thread did work for me: https://community.qualtrics.com/XMcommunity/discussion/4229/customize-grid-line-values-for-slider-type-questions

Badge

https://community.qualtrics.com/XMcommunity/discussion/comment/42775#Comment_42775I'm happy to report that this one worked for me, too! Thank you, sherriffs_sb!

Leave a Reply