Need Help Moving Slider Labels Below the Slider

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.

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!