CSS: increasing width of "area" for question texts | XM Community
Skip to main content

We have created a theme where the survey canvas has been increased in it’s width a bit (the standard question container/survey canvas still uses screen sizes from 1988 it seems and with modern larger screen sizes it just doesn’t look good).

 

However, one thing I was not yet able to solve is that the question texts still line-break in their original container/canvas width.

 

I have a vague feeling that this probably needs to be adjusted separately for each question type (would be awesome if not), so teh 4 standard types (text, radio button, multi select and matrix) would be a very good start already.

 

The current code looks like 

 

Deactivating the max-width would probably help.

Any ideas?

Hi,

Setting max-width to 100% for .question .question-display should do the trick for all 4 types.

Thanks. I now tried min-width, which also works. Does anything speak against using min-width?

Hi ​@MartinD,
max-width: 100% ensures the element never exceeds the container size, but allows it to shrink if content is small. Whereas, min-width: 100% forces the element to at least match the container width — which could lead to overflow or horizontal scrolling if the parent container is constrained or behaves responsively.

As suggested by ​@vgayraud, max-width: 100% is the safer and more responsive option for your case, unless you have specific reasons to prevent shrinking.
 

If you’re fine-tuning across question types, and want to future-proof the layout, consider wrapping your question content in a .container div with consistent width rules, and let .question-display inherit or stretch based on it. That keeps you flexible if Qualtrics updates their base styles later.

Happy it helps.
-- Rochak

Terms & ConditionsAccessibility statement