multiple choice tabular question - doesn't display correctly on smaller screen

[MalikaIhle]

I have created several questions in a tabular format (for one question, several items are rated on the same scale), using mc_heading.
However, if I resize the window to something less wide, the display become such that we do not know which tick box belong to which heading.
In the case of multiple options - single choice question, at some point (around the phone size display), the format makes sense again as the scale is repeated for each item. However, for questions with multiple choices, multiple andswers possible, the scale completely disappear and the tick boxes don't have any labels anymore.

See examples screen shoted below:

1. Single choice:
   a. laptop display

b. half a laptop screen --> problematic

c. phone size display

2. multiple choice:
   a. laptop display

b. half a laptop screen --> problematic

c. phone size display --> extremely problematic

Any advice?
Thanks and best wishes
Malika
malika.ihle@lmu.de

[rubenarslan]

Hi Malika, can you attach an xls file of your survey with which I can reproduce the problem?

I generally don't recommend this kind of design. I think many still use it because paper surveys look like this (to save paper). But I think it's cognitively taxing and harder to click on and on the screen we don't have to be economical with space.

[MalikaIhle]

group_onboarding_survey.xlsx

Thanks for the prompt reply! I think the whole team prefers this design, altough the phone version could work too I suppose.

[rubenarslan]

You can copy this to your run -> settings -> CSS and fiddle with the max-width value to get your desired breakpoint.

@media (max-width: 1000px) {
	/* display mc_heading style displays on mobile, when question and choices stack, aren't side-by-side */
	form.form-horizontal div.form-row.item-mc_heading.form-group {
		display: none;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label {
		text-align: inherit;
		text-indent: inherit;
		height: inherit;
		overflow: inherit;
		line-height: inherit;
		min-height: inherit;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label span, form.form-horizontal div.form-row.form-group.hide_label div.controls label span.mc-span {
		line-height: inherit;
		visibility: visible;
		display: inline-block;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label input {
		visibility: visible;
	}
	/* make check buttons vertical */
	form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls label:not(.keep-label), form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls button.btn {
		width: 100%;
	}
	form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls label:not(.keep-label) {
		margin-bottom: 10px;
		margin-left: 0px;
	}

}

[MalikaIhle]

Thanks! This works well for the multiple choice - single option questions

however, it doesn't for the multiple choice - multiple options questions:

any ways to make the labels appear there too?

[rubenarslan]

Hi, here's a revised CSS snippet

@media (max-width: 1200px) {
	/* display mc_heading style displays on mobile, when question and choices stack, aren't side-by-side */
	form.form-horizontal div.form-row.item-mc_heading.form-group {
		display: none;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label {
		text-align: left;
		text-indent: inherit;
		height: inherit;
		overflow: inherit;
		line-height: inherit;
		min-height: inherit;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label span, form.form-horizontal div.form-row.form-group.hide_label div.controls label span.mc-span {
		line-height: 25px !important;
		visibility: visible !important;
		display: inline-block  !important;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label {
	    text-align: left !important;
	}
	
	form.form-horizontal div.form-row.form-group.hide_label div.controls label span.cb-inline-label {
		line-height: 25px !important;
		visibility: visible !important;
		display: inline-block !important;
	}
	form.form-horizontal div.form-row.form-group.hide_label div.controls label input {
		visibility: visible;
	}
	/* make check buttons vertical */
	form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls label:not(.keep-label), form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls button.btn {
		width: 100%;
	}
	form.form-horizontal div.form-row.form-group:not(.mc_horizontal) div.controls label:not(.keep-label) {
		margin-bottom: 10px;
		margin-left: 0px;
	}

}

[MalikaIhle]

this works great thank you so much!