How to customise the length of my sliders? | XM Community
Skip to main content
Question

How to customise the length of my sliders?

  • October 23, 2023
  • 2 replies
  • 104 views

Forum|alt.badge.img+1

Hi,

 

I am trying to make my slider 0-100 % mobile friendly but it does not work. I have already tried that “mobile-friendly” button and it does not help. I have also tried this code below: 

 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

if (window.matchMedia("(min-width: 720px)").matches) {
  /* Code to execute */
jQuery("#" + this.questionId + " .QuestionBody").width(600);
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

 
 } else {
  /* Code to execute */
  jQuery("#" + this.questionId + " .QuestionBody").width(300);
jQuery("#" + this.questionId + " .statement-container").css("padding-top",6);

 }

});

 

However, that does not work either. This is how it looks like on mobile phone.

 

 

Another thing! I had the same mobile friendly issue with the videos and I needed to use this code (in the custom CSS) to make it work: 

 

.container { position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.responsive-iframe {
position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

 

 

So, any ideas how to fix this?
 

2 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • October 23, 2023

@jesolatu With mobile friendly turn on and this code, the survey slide looks good on my side. Do you have any other custom code that interfering with this?


Forum|alt.badge.img+1
  • Author
  • 3 replies
  • October 24, 2023

Hi! hmm. okay, that is confusing. And no, I dont have any other custom codes. I have used only these two codes, though in different places.  I use the latter coded in the style & feel section and the first code in terms of the specific question javascript.

 

Jesse