Hello @jMakin, 

If you are using the 'Classic' layout, you might not need to use the code provided here. The question should automatically adjust to fit the display. However, if you are still experiencing issues, try adding the '!important' tag and the QID in your code. This will help override any conflicting styles.

Thanks, once again, Sachin.

I’m in Simple layout and did want to stay there.

i was toying with the correct way to implement your suggestions, couldn’t get it to work but all the searching led me to discover that it was a padding issue as per Simple Layout - CSS to remove right padding | XM Community (qualtrics.com).

Using the solution from there solved the problem. The issue now is that it makes all textboxes the full width (i actually adjusted that to 90%). That is perfect for my essay box but not for other boxes that only need small text entries.

I am going to try to find a way to adjust them down to 50% or less.

I am happy for any further help you are willing to provide to achieve this, but please don’t go out of your way. Part of the fun is the exploration to stumble upon the solution!

Hello,

The code provided by TomG should suffice for your needs. Simply remove the top code meant for the entire page. For small text entries, insert the code within the question text along with the <style> tag, and adjust them as needed.

@Sachin Nandikol and @jMakin,

The Simple layout CSS is from @Tom_1842, not me. The issue is the use of !important in the rules. A better option is to make CSS selectors more specific that the rule(s) you want to override. 

Thanks @TomG and @Sachin Nandikol 

This means that in the form-wide css i leave off the !important for the textbox option - it should still make everything that specified size, but then, for the text i want to be smaller i write question-specific code that uses !important so it overrides the survey-wide style. That makes complete sense!

The side-by-sides tend to spread full-width now too and look a bit silly so i’m searching for the correct element to globally size them back a bit. I think it’s .q-grid .q-mb-1 so i’m searching for that in the F12 Dev Tools.

Thanks again

As an update: I figured it out. @Tom_1842 brilliant code (Simple Layout - CSS to remove right padding | XM Community (qualtrics.com) was all-inclusive for text-boxes whereas i only wanted the essay box to go full width.

So, i amended it to read:

/*essay text entries only*/
#app.no-mo-compo-layout .te .question-content .resize-wrapper, #app.no-mo-compo-layout .te .question-content textarea {
    width: 100% !important;
}

I then managed to work out how to apply this globally to side-by-sides (in my case i reduced them to 75%, and applied a border just because: 

/*side-by-side table*/
.sbs-table {
     max-width: 75% !important;
     border: 1px solid #00afdc !important;
}

If it’s ok with you guys i’ll mark this as the best answer - just in case it helps someone else easily find a solution to their similar problem.

But, without a single doubt i would never have got close to this answer without the help of you all. Cheers.