- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Bootstrap Buttons: Horizontal/Vertical Layout
- CMA_Summer
- Topic Author
- Offline
- New Member
Less
More
1 year 7 months ago #232152
by CMA_Summer
Bootstrap Buttons: Horizontal/Vertical Layout was created by CMA_Summer
LimeSurvey version: 5.4.1
Own server or LimeSurvey hosting: LimeSurvey Cloud
Survey theme/template: Vanilla
==================
Hi everyone,
I'm struggling with the layout of bootstrap buttons. My survey will be used on mobile devices. I have a question which uses 5 bootstrap buttons as answer options which are displayed vertically in a column on mobile device. I'd like to change that to be displayed horizontally. When using my desktop pc to view the survey, the buttons are displayed horizontally. So, I guess I need to tweak the settings of the grid and maybe the size of the buttons via custom.css. And that's where I get lost.
Any help is appreciated.
Thanks and best regards.
Own server or LimeSurvey hosting: LimeSurvey Cloud
Survey theme/template: Vanilla
==================
Hi everyone,
I'm struggling with the layout of bootstrap buttons. My survey will be used on mobile devices. I have a question which uses 5 bootstrap buttons as answer options which are displayed vertically in a column on mobile device. I'd like to change that to be displayed horizontally. When using my desktop pc to view the survey, the buttons are displayed horizontally. So, I guess I need to tweak the settings of the grid and maybe the size of the buttons via custom.css. And that's where I get lost.
Any help is appreciated.
Thanks and best regards.
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
1 year 7 months ago #232157
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Bootstrap Buttons: Horizontal/Vertical Layout
If you have more than a couple of characters in the buttons, they will not fit on most phone screens (~360px wide).
Having said that, place this CSS in the question source:
Having said that, place this CSS in the question source:
Code:
<style type="text/css" data-author="Tony Partner"> @media (max-width: 768px) { #question{QID} .bootstrap-buttons-div.col-xs-12 { width: 20%; padding: 0 3px; } } </style>
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: CMA_Summer
Please Log in to join the conversation.
- CMA_Summer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
1 year 7 months ago #232158
by CMA_Summer
Replied by CMA_Summer on topic Bootstrap Buttons: Horizontal/Vertical Layout
Thanks, tpartner.
This works perfectly as I'm using small images in the buttons.
I was also trying to work with the container-fluid class but didn't come to any result.
This works perfectly as I'm using small images in the buttons.
I was also trying to work with the container-fluid class but didn't come to any result.
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
1 year 7 months ago #232159
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Bootstrap Buttons: Horizontal/Vertical Layout
You don't want to adjust that globally as it is applied to other element(s).
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: CMA_Summer
Please Log in to join the conversation.