- Posts: 162
- Thank you received: 14
Ask the community, share ideas, and connect with other LimeSurvey users!
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } }
teracomp wrote: Using .flex-sm .flex-xs sounds great, but where can I add this in the interface? When I add classes to Display Options, they apply to the question, not the individual answers. Do I have to use Javascript to replace the col-sm-2 class with flex-sm?
.flex-answers .ls-answers ul{ display: flex; flex-direction: row; } .flex-answers .ls-answers .answer-item{ flex: auto; }
.flex-answers .ls-answers{ display: flex; flex-direction: row; } .flex-answers .ls-answers .bootstrap-buttons-div{ flex: auto; } .flex-answers .ls-answers .col-sm-2{ float:none; with:auto; }
/*** Likert 5 Support ***/ @media (max-width: 1200px ){ .likert-five .btn { font-size: 12px; /** tweak as needed **/ height: 68px; /** tweak as needed **/ white-space: normal; } } @media (min-width: 768px) { .likert-five .col-sm-2 { width: 19%; } .likert-five .btn { height: 68px; /** tweak as needed **/ padding: 10px 0; white-space: normal; } } @media (max-width: 768px) { .likert-five .col-sm-2 { width: 19%; } .likert-five .btn { height: 68px; /** tweak as needed **/ padding: 10px 0; white-space: normal; } .likert-five .btn { padding: 10px; font-size: 15px; height: auto; } } @media (min-width: 769px) and (max-width: 992px) { .likert-five .btn { font-size: 12px; } }