Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Setting mobile layout as standard for desktop

  • Omti90
  • Omti90's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 9 months ago #217608 by Omti90
Setting mobile layout as standard for desktop was created 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #217609 by tpartner
Replied by tpartner on topic Setting mobile layout as standard for desktop
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:

Code:
@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.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago - 2 years 9 months ago #217613 by DenisChenu
Replied by DenisChenu on topic Setting mobile layout as standard for desktop
@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: 2 years 9 months ago by DenisChenu.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago - 2 years 9 months ago #217615 by tpartner
Replied by tpartner on topic Setting mobile layout as standard for desktop
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: 2 years 9 months ago by tpartner.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • Omti90
  • Omti90's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
2 years 9 months ago #217619 by Omti90
Replied by Omti90 on topic Setting mobile layout as standard for desktop
Thank you :) Low braincell solutions are always helpful.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #217629 by tpartner
Replied by tpartner on topic Setting mobile layout as standard for desktop
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
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source