Hi,

Add the following CSS style in your question’s source.

<style type="text/css">.horizontalbar {
    display: flex;
    flex-direction: column;
}

.labels-container {
    order: 2;
}

.slider-container {
    order: 1;
}
</style>

Hi @vgayraud

Thank you for the reply .I tried applying the CSS you shared by adding it to the Custom CSS section under Look & Feel → Style → Custom CSS. I also included the following code to hide the scale points on my slider, which works perfectly:

: “.slider-min, .slider-max {
    display: none;
}”

Now, I've combined both your code and the one above to hide scale points . While the scale points are successfully hidden (as intended), the issue is that the slider labels are still appearing above the slider instead of below (as in the screenshot below) , despite the using the CSS. Could you please advise on how to ensure the labels appear underneath the slider?

I have used the two codes in combination as : 

.slider-min, .slider-max {
    display: none;
}
<style type="text/css">.horizontalbar {
    display: flex;
    flex-direction: column;
}

.labels-container {
    order: 2;
}

.slider-container {
    order: 1;
}
</style>

If you apply it in the look & feel custom CSS, don’t include the <style></style> tags.

Hi @vgayraud,
I’ve removed the <style> tags as suggested , but the labels are still appearing above the slider instead of below. 

.horizontalbar {
    display: flex;
    flex-direction: column;
}

.labels-container {
    order: 2;
}

.slider-container {
    order: 1;
}
 

Which layout are you using?

I’m unable to see the Layout tab, which I believe may be restricted by my organization. Could the issue be related to the layout settings? If so, I can reach out to my organization’s Brand Administrator for further assistance.

No, it’s fine. You’re just using the new survey experience, which has no layout and different class names.

This should work :

.slider-min, .slider-max {
    display: none;
}

.slider .question-content {
    display: flex;
    flex-direction: column;
}

.slider .slider-labels {
    order: 2;
}

.slider .slider-statement {
    order: 1;
}

Yes, thank you. This worked perfectly. It now appears as shown in the screenshot. Is there a way to align 100% to the extreme right, similar to how 0% is positioned on the extreme left, to improve the clarity of the task?

.slider-min, .slider-max {
    display: none;
}

.slider .question-content {
    display: flex;
    flex-direction: column;
}

.slider .slider-labels {
    order: 2;
    padding-inline-end: 0;
}

.slider .slider-statement {
    order: 1;
}

Thank you so much, @vgayraud . It looks perfect now!