Hi, you can use the below CSS to make the SBS question take up the whole screen and make the text input take up 100% of the column width:

/*full container simple layout*/
/*whole page*/
#page #auto-advance-banner-container, #page #footer, #page #header-container, #page #logo-container, #page #survey-canvas {
    width: 100% !important;
}

/*text entries*/
#app.no-mo-compo-layout .te .question-content .resize-wrapper, #app.no-mo-compo-layout .te .question-content input[type=text], #app.no-mo-compo-layout .te .question-content input[type=password], #app.no-mo-compo-layout .te .question-content textarea {
    width: 100% !important;
}

/*multiple choice*/
.mc.horizontal .choices .choice, .mc.vertical .choices .choice {
    max-width: 100% !important;
}

/*textgraphics*/
.question .question-display {
    max-width: 100% !important;
}

.grid-group .grid-cell-input .text-input {
    max-width: 100% !important;
}

While you could make the text input higher by adjusting the line-height with CSS, this won't make the text wrap, which I think is what you want. To do that, the <input type=”text”> elements needs to be replaced with <textarea> elements. Since Simple/NSTE layout uses React and I don't think SBS works with setChoiceValue(), the method mentioned in this thread can be used to set values to the text-inputs so that Qualtrics actually records them. Also, the elements change a bit between desktop and mobile, so some lines were added to use name (desktop) or id (mobile) depending on which is available. Try updating the SBS question's JavaScript with the below:

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
const inputs = this.getQuestionContainer().querySelectorAll('input.text-input');

  inputs.forEach(input => {
    // Use the input's name or id as a unique reference
    const ref = input.name || input.id;
    if (!ref) return;

    // Assign the reference as the input's id if not already set
    if (!input.id) {
      input.id = ref;
    }

    // Hide the original input
    input.style.display = 'none';

    // Create a textarea
    const textarea = document.createElement('textarea');
    textarea.id = ref + '_textarea';
    textarea.className = input.className;
    textarea.name = ref + '_textarea';
    textarea.setAttribute('aria-labelledby', input.getAttribute('aria-labelledby'));
    textarea.setAttribute('tabindex', input.getAttribute('tabindex'));
    textarea.rows = 4;
    textarea.style.width = '100%';

    // Pre-fill textarea with input value
    textarea.value = input.value;

    // Insert textarea before the hidden input
    input.parentNode.insertBefore(textarea, input);
  });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});


Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
  function setNativeValue(element, value) {
    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
    const prototype = Object.getPrototypeOf(element);
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

    if (valueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element, value);
    } else if (valueSetter) {
      valueSetter.call(element, value);
    }
  }

  const inputs = this.getQuestionContainer().querySelectorAll('input.text-input');

  inputs.forEach(input => {
    const ref = input.name || input.id;
    if (!ref) return;

    const textarea = document.getElementById(ref + '_textarea');
    if (textarea) {
      setNativeValue(input, textarea.value);
      input.dispatchEvent(new Event('input', { bubbles: true }));
    }
  });
});

And I should add, I would think that at some point changing the text box size to "Essay" would make this text input a textarea, which is how it works for the other layouts, but not yet for the NSTE.

Thank you so much Tom 😀 Works perfectly 👍

I did have to make the “question text” of my freetext box larger. (the “click to write column 2” part).

The “question text” of my 4 MC options is quite large, and so with the 100% setting, the MC options were taking up the largest part of the screen, while the text box then only got a tiny fraction.

I tried setting the CSS part for the MC to a lower percentage but that didn’t do much,

but then by making my “question text” larger I could make the box the size that I wanted.