Setting mobile layout as standard for desktop

More
3 months 3 weeks ago #217608 by Omti90
Hello everyone,

is there some way to set the mobile layout for limesurvey as the standard layout, so it's shown on PC? Especially matrix questions look rather ugly in desktop standard, since answer options tend to get squished.

Thank you,
Omti90

Please Log in to join the conversation.

More
3 months 3 weeks ago #217609 by tpartner
There is no "mobile" layout - it is responsive to screen width.

If you want the array questions in a vertical block layout for all screens widths, extend your theme and add something like this to the end of the custom.css file:

@media only screen and (max-width: 3000px)  {
    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;}
    .dir-ltr table.ls-answers,.dir-ltr table.ls-answers thead,.dir-ltr table.ls-answers tbody,.dir-ltr table.ls-answers th,.dir-ltr table.ls-answers td,table.ls-answers tr {text-align:left;}
    .dir-rtl table.ls-answers,.dir-rtl table.ls-answers thead,.dir-rtl table.ls-answers tbody,.dir-rtl table.ls-answers th,.dir-rtl table.ls-answers td,table.ls-answers tr {text-align:right;}
 
    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}
    .dir-rtl table.ls-answers tbody td{text-align:right;}
    .ls-answers td.radio-item,.ls-answers td.checkbox-item{padding: 4px;}
    .dir-ltr .ls-answers td.radio-item,.dir-ltr .ls-answers td.checkbox-item{padding-left: 24px;padding-right: 4px;}
    .dir-rtl .ls-answers td.radio-item,.dir-rtl .ls-answers td.checkbox-item{padding-right: 24px;padding-left: 4px;}
 
    table.ls-answers tbody .control-label{text-align:left}
    .dir-rtl table.ls-answers tbody .control-label{text-align:right}
    table.ls-answers .answertextright{text-align:right}
    .dir-rtl table.ls-answers .answertextright{text-align:left}
 
    /* Show the label */
    table.ls-answers .ls-label-xs-visibility
    {
        display:block;
        position:relative;
        width: auto;
        height: auto;
        overflow:initial;
        white-space: normal;
    }
    .dir-ltr table.ls-answers .ls-label-xs-visibility{left:auto;}
    .dir-rtl table.ls-answers .ls-label-xs-visibility{right:auto;}
 
    table.ls-answers .radio-item .ls-label-xs-visibility,table.ls-answers .checkbox-item .ls-label-xs-visibility{
        line-height: initial;
        text-indent: initial;
    }
    .dir-ltr table.ls-answers .radio-item .ls-label-xs-visibility,.dir-ltr table.ls-answers .checkbox-item .ls-label-xs-visibility{margin-left:0;}
    .dir-rtl table.ls-answers .radio-item .ls-label-xs-visibility,.dir-rtl table.ls-answers .checkbox-item .ls-label-xs-visibility{margin-right:0;}
 
    table.ls-answers .ls-label-xs-visibility > *
    {
        position:relative;
        top:auto;
        width:auto;
        height:auto;
        overflow:auto;
    }
    .dir-ltr table.ls-answers .ls-label-xs-visibility > * {left:auto;}
    .dir-rtl table.ls-answers .ls-label-xs-visibility > * {right:auto;}
 
    .dir-rtl table.ls-answers .answers-list p[dir=rtl] {left:0;text-align:right;}
 
    .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::before,.dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {margin-left:-20px;}
    .dir-rtl table.ls-answers .radio-item label.ls-label-xs-visibility::before,.dir-rtl table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {margin-right:-20px;}
    .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::after,.dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {margin-left:-20px;}
    .dir-rtl table.ls-answers .radio-item label.ls-label-xs-visibility::after,.dir-rtl table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {margin-right:-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}
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 months 3 weeks ago - 3 months 3 weeks ago #217613 by DenisChenu
@media only screen {
maybe ?
or
@media only screen and (min-width: 0px) {

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
Last edit: 3 months 3 weeks ago by DenisChenu.

Please Log in to join the conversation.

More
3 months 3 weeks ago - 3 months 3 weeks ago #217615 by tpartner
Sure, there are several ways to override it - I choose the one requiring the least brain cells. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 3 months 3 weeks ago by tpartner.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
3 months 3 weeks ago #217619 by Omti90
Thank you :) Low braincell solutions are always helpful.

Please Log in to join the conversation.

More
3 months 3 weeks ago #217629 by tpartner
You're welcome but I wonder why you don't use a series of list-radio questions instead.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now