Thanks to tpartner. Unfortunately, the script did not work as expected for us. We use LimeSurvey Version 6.5.14 with Fruity TwentyThree.
For us the following code added to custom.css did the trick (thanks to my colleague who doesn't want to read his name):
@media only screen and (max-width: 1024px) {
table.ls-answers, table.ls-answers thead, table.ls-answers tbody, table.ls-answers th, table.ls-answers td, table.ls-answers tr {
display: block;
}
table.ls-answers, table.ls-answers thead, table.ls-answers tbody, table.ls-answers th, table.ls-answers td, table.ls-answers tr {
text-align: left;
}
table.ls-answers thead {
display: none;
}
/* We don't need it for accessibility : we already have the label */
table.ls-answers tbody td {
text-align: left;
}
table.ls-answers .information-item:empty {
display: none;
}
.ls-answers td.checkbox-item {
padding: 4px;
}
.ls-answers td.checkbox-item {
padding-left: 24px;
padding-right: 4px;
}
table.ls-answers tbody .control-label {
text-align: left;
}
table.ls-answers .answertextright {
text-align: right;
}
/* Show the label */
table.ls-answers .ls-label-xs-visibility {
display: block;
position: relative;
width: auto;
height: auto;
overflow: initial;
white-space: normal;
}
table.ls-answers .ls-label-xs-visibility {
left: auto;
}
table.ls-answers .checkbox-item .ls-label-xs-visibility {
line-height: initial;
text-indent: initial;
}
table.ls-answers .checkbox-item .ls-label-xs-visibility {
margin-left: 0;
}
table.ls-answers .ls-label-xs-visibility > * {
position: relative;
top: auto;
width: auto;
height: auto;
overflow: auto;
}
table.ls-answers .ls-label-xs-visibility > * {
left: auto;
}
table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
margin-left: -20px;
}
table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
margin-left: -20px;
}
table.ls-answers > tbody > tr:hover {
background-color: transparent;
}
/* bs fix */
table.ls-answers td.visible-xs, table.ls-answers th.visible-xs {
display: block !important;
}
/* Don't display repeating header on mobile devices'*/
table.ls-answers tr.ls-heading-repeat {
display: none;
}
.d-md-none {
display: block !important;
}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.d-md-none {
display: block !important;
}
}