My re-sized text entry boxes aren't working on mobile, is there a javascript for this? | XM Community
Skip to main content

I have a question which asks how many people live in a respondents household, I only need the text entry box to be small (enough to enter 2 digits), but I am having a few issues.
a) When I re-size it manually with the drag and drop option the box isn't going as small as I want it to
b) Despite the size I drag it to, on a mobile, the textbox always enlarges and stretches to the length of the screen.

image.png
I have managed to re-size my side-by-side text entry boxes with this code: jQuery("#"+this.questionId+" input[type='text']").css("width","3.5em") but this isn't working for these questions.
Will this have anything to do with the Custom CSS theme in my survey?
.LanguageSelectorContainer { display: none; }
/* Remove items background for radio buttons */
label:not(.q-radio) { background: transparent !important; }
.Skin .SkinInner { padding-top: 10px !Important; }
.Skin .MC li .LabelWrapper { margin-top: 0; margin-bottom: 0; }
.Skin .QuestionText { font-size: 18px !Important; }
.Skin .QuestionBody { font-size: 16px !Important; }
@media (max-width: 770px) {
  .Skin .QuestionText { font-size: 16px !Important; }
  .Skin .QuestionBody { font-size: 16px !Important; }
}
.Skin .QuestionText { line-height: 1.3em !Important; }

.Skin .QuestionText, .Skin .QuestionBody {
padding-top:5px !important;padding-bottom:5px !important;
}
.Skin label.SingleAnswer, .Skin label.MultipleAnswer {
padding-top:5px !important;padding-bottom:5px !important;
}

Any help will be appreciated!
Thanks.

Use the below code and replace the QID and adjust the width by changing the percentage value.
@media (max-width: 480px){
  #QID1 .InputText {
  width: 20% !important;
}
}

PraDeepKotian_Ugam I am eager to use this accepted answer but I tried copying and pasting this code into the javascript editor in the relevant question (Q29) of my survey. I put it on the OnLoad section of the editor and substituted 29 for the 1 so it read #QID29. Unfortunately, this didn't work for me.
I received the following error from Qualtrics, "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token ILLEGAL"
Any help would be much appreciated. THANKS.

https://community.qualtrics.com/XMcommunity/discussion/comment/46827#Comment_46827It is CSS, not JavaScript. Add it to the question text inside an html