Mobile device avoid scrolling bipolar scale

Assuming you are seeing this in mobile preview window, please make sure you have enabled ‘Mobile friendly’ option in the Matrix question, and then test in the real mobile device. 

Thanks for your response. The option is enabled. However, the participants have to scroll. I would like to avoid it. Is there a CSS to decrease the overall size of the bipolar scale in order to ensure that it fits the screen of a mobile device? 

Hi @Jojo1997 

Faced the same issue in my survey question. Try the below CSS code 

.QuestionBody {

display: flex;

flex-wrap: nowrap;

overflow-x: auto;

-webkit-overflow-scrolling: touch;

}

.Slider { flex: 0 0 auto;

width: 14%;

max-width: 14%;

margin-right: 20px;

}

.Slider:last-of-type {

margin-right: 0;

}

Let me know if its works or not . I have another code if this doesn’t work in your survey question.

You have to enable mobile friendly view or you can use coursel type matrix.

@krbhavya Thank you for your response. If I create a new survey with only one block consisting of a bipolar scale it is working. In my final survey which consists of different question types, the provided CSS changes the likert scale to bipolar scales but still the scrolling is necessary… 

Is there a CSS only for bipolar scales? 

I am confused.

Looking forward to your response. 

Keep only bipolar question on a page and paste the CSS in the question html view under style tag

@Jojo1997 - You might be interested in this Mobile Friendly Bipolar Matrix JS function.

This simple line of code will also do the work:

jQuery(".ScrollIndicator").css("display","none")   

Hi @Jojo1997 

Yo can use below CSS to achieve the same :

<style>
@media (max-width: 770px){
.Skin .Matrix .QuestionBody{
    transform: scale(0.78);
    padding-left: 0px!important;
    overflow: visible;
}}

</style>

Further, one recommendation if you enable this button:
 

Then on small  screen you can have below structure :
 

Hope this resolves your query😊!!