Search code examples
htmlsliderqualtrics

Text added as label to a Qualtrics slider keep changing position

I am creating a survey in Qualtrics. One of the questions includes a slider. The image below shows how I would like the question to look like. As you can see five labels have been added to the slider, and three of them are composed of both a graphic and a text; the text is at the bottom. To have the text at the bottom I clicked on "Text Position / Bottom".

enter image description here

Problem is, once I go to Preview or just reload the page the text goes back to the top:

enter image description here

The html code for the text "100% Jar A" (I guess it is html, forgive my ignorance) is:

<span style="font-size:16px;"><strong>100% Jar A</strong></span>

After some online digging, I tried the following code snippet:

<div style="position: absolute; bottom: 12px;">
100% Jar A
</div>
</div>

Now the text "100% Jar A" is at the bottom, but behind the graphic:

enter image description here

How can I fix that?

Solution

  • In the end I called Support and they suggested I insert the images through the "Rich Content Editor" rather than doing that directly. It worked:

    enter image description here