How do I center the variables "Not Confident" and "Totally Confident" over the "0" and "100"?

 

You may use the below css snippet…

/* CSS code to center the text over the values */
.confidence-label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100px; /* Adjust the height as needed */
}

.confidence-label .value {
  margin-top: -10px; /* Adjust the margin-top to fine-tune the vertical position */
}
 

Where do I add the CSS code?

To apply this code to your Qualtrics survey, follow these steps:

1. Go to the "Look & Feel" section of your survey.
2. Click on the "Advanced" tab.
3. In the "Custom CSS" text area, paste the above code snippet.
4. Save the changes and test your survey.

It still shows the same thing unfortunately...

It still shows the same thing unfortunately...

Most probably it could be because of the box structure for the question type then…. The outer lining border you see in here which limits the dimensions maybe then 

Do you think that the box structure for the question type can be changed? Is there a way to expand the dimensions?

I dont think so because these are like pre defined templates in qualtrics but there’s no harm in trying to look for the same …. I’ll try and look for it and keep you posted with an update

Thank you for you help.

No issues… :)

Hi @krysvtal ,

If you are looking for a structure like below :
 

Just add below HTML into labels:

 

<span id="left">Not<p>Confident</p></span>
<span id="right">Totally <p>Confident</p></span>

Hope this resolves your query😊!!!

Thank you for your response! Would that be as far as they could go right/left? Does Qualtrics not allow me to center the “Not Confident” and “Totally Confident” directly above the 0 or 100? Thank you again.

Hi, I was able to put something like this in place by centering the first and last labels and adding hidden labels between them to keep the text anchored at the endpoints. Then, adding padding to the numbers and sliders so that they appear below the centered labels.

To give it a try, first create a slider and enable labels. Use the "Edit Multiple" to add the 11 below labels:

<div style="text-align: center;">Not Confident</div>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div style="text-align: center;">Totally Confident</div>

Next, add the below CSS. The padding is a little different for mobile vs larger screens to get the labels positioned over 0 and 100:

@media only screen and (min-width: 481px) {

.numbers {
padding-left: 4% !important;
padding-right: 4% !important;
}

.Skin .horizontalbar td.BarOuter {
padding-left: 4%;
}

.track {
width: 95% !important;
}

}

@media only screen and (max-width: 480px) {

.numbers {
padding-left: 10% !important;
padding-right: 10% !important;
}

.Skin .horizontalbar td.BarOuter {
padding-left: 10%;
}

.track {
width: 88% !important;
}

}

@Tom_1842 this seems to be a great approach though!👍