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

CSS: increasing width of "area" for question texts

  • July 1, 2025
  • 3 replies
  • 58 views

Forum|alt.badge.img+2

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?

3 replies

vgayraud
QPN Level 6 ●●●●●●
Forum|alt.badge.img+58
  • QPN Level 6 ●●●●●●
  • 549 replies
  • July 1, 2025

Hi,

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


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 29 replies
  • July 1, 2025

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


rochak_khandelwal
Level 5 ●●●●●
Forum|alt.badge.img+31
  • Level 5 ●●●●●
  • 170 replies
  • July 2, 2025

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