Change font size of multiple choice subquestions

More
1 month 3 weeks ago - 1 month 3 weeks ago #157988 by wizard2none
wizard2none created the topic: Change font size of multiple choice subquestions
How do you change the size of multiple choice subquestions?


Using Template: Default Template
Using LS 2.67.3 on LimeSurvey.org

I tried adding the following to the bottom of file 'template.css':
div.multiple-choice-container.subquestion-list {
    font-size: 26px;  
}
 

It increased the font, but now the check boxes no-longer align (see attachment).
Attachments:
Last Edit: 1 month 3 weeks ago by wizard2none. Reason: Correction

Please Log in to join the conversation.

More
1 month 3 weeks ago #157991 by Joffm
Joffm replied the topic: Change font size of multiple choice subquestions
Hi,

Add .line-height:
<style type="text/css">
div.multiple-choice-container.subquestion-list {
    font-size: 26px;
    line-height:26px;
}
</style>

Play around with the value of line-height.

See attached.

Joffm
Attachments:
The following user(s) said Thank You: LouisGac

Please Log in to join the conversation.

More
1 month 3 weeks ago #157992 by wizard2none
wizard2none replied the topic: Change font size of multiple choice subquestions
Thanks for the suggestion Joffm.

I as able to get it to work by playing with line height as you suggested.

Ended up with:
line-height:100%

With line-height:26px; or line-height:26px things were still a bit staggered.

However, as shown in the attachment, the checkmark looks a bit small now. Is there a way to increase its size?
Attachments:

Please Log in to join the conversation.

More
1 month 3 weeks ago #157997 by Joffm
Joffm replied the topic: Change font size of multiple choice subquestions
Hi,
The check-icon is the font-awesome icon.

You could try to find something in the file "awesome-bootstrap-checkbox.css"
combined with this article http://astronautweb.co/snippet/font-awesome/

To be honest: I have no other idea.

Joffm
The following user(s) said Thank You: LouisGac

Please Log in to join the conversation.

More
1 month 2 weeks ago - 1 month 2 weeks ago #158004 by tpartner
tpartner replied the topic: Change font size of multiple choice subquestions
I'm not in a position to offer code this weekend but the check-boxes are ::before and ::after pseudo-elements affiliated with the labels. Changing the margins, width, height and font-size of those pseudo-elements should do the trick.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 1 month 2 weeks ago by tpartner.

Please Log in to join the conversation.

More
1 month 2 weeks ago #158008 by wizard2none
wizard2none replied the topic: Change font size of multiple choice subquestions
Thanks, tpartner.
Tried, but didn't quite see how to do it. This isn't urgent so will wait for your insights next week.

Please Log in to join the conversation.

More
1 month 2 weeks ago #158012 by tpartner
tpartner replied the topic: Change font size of multiple choice subquestions
Can you activate a test survey and give us a link so we can see the styles you have in place?

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
1 month 2 weeks ago #158013 by wizard2none
wizard2none replied the topic: Change font size of multiple choice subquestions
Hi Tony,

Here's the link you requested: wizard2none.limequery.com/218551

Please Log in to join the conversation.

More
1 month 2 weeks ago #158029 by tpartner
tpartner replied the topic: Change font size of multiple choice subquestions
Add something like this to the end of template.css:

.multiple-choice-container .checkbox label::before {
    width: 24px;
    height: 24px;
}
 
.multiple-choice-container .checkbox label::after {
    width: 22px;
    height: 22px;
    padding-left: 4px;
    padding-top: 4px;
    line-height: normal;
    font-size: 16px;
}


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

Please Log in to join the conversation.

More
1 month 2 weeks ago #158030 by LouisGac
LouisGac replied the topic: Change font size of multiple choice subquestions
change font size: that could be a pretty nice options for advanced template in LS3 branch...

Please Log in to join the conversation.

More
1 month 2 weeks ago #158033 by tpartner
tpartner replied the topic: Change font size of multiple choice subquestions
The possibilities are endless :)

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
1 month 2 weeks ago #158035 by tammo
tammo replied the topic: Change font size of multiple choice subquestions
Easy fix: use extra class like .font24 and .font18 (after defining these in .css)

More complex: offer the use a box in advanced options where you can specify font-size for this question.

Would that also be doable with new question templates?

Tammo


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in to join the conversation.

More
1 month 2 weeks ago #158036 by wizard2none
wizard2none replied the topic: Change font size of multiple choice subquestions
Hi Tony,

Could be close enough--but I'm getting a slightly different result than you (see attached).
The check marks are not centered in my rendering but rather placed towards the bottom of each checkbox.

I wonder why the difference. Is there something that controls the placement of the checks in the checkbox?

I tested by making a copy of the default template and adding your lines at the bottom of template.css.
Attachments:

Please Log in to join the conversation.

More
1 month 2 weeks ago #158037 by tpartner
tpartner replied the topic: Change font size of multiple choice subquestions
It looks to me as if you have removed the rule that increases the font-size. The complete CSS should look like this:

/ * Larger Subquestions */
 
div.multiple-choice-container.subquestion-list {
    font-size: 26px;
    line-height:26px;
}
 
.multiple-choice-container .checkbox label::before {
    width: 24px;
    height: 24px;
}
 
.multiple-choice-container .checkbox label::after {
    width: 22px;
    height: 22px;
    padding-left: 4px;
    padding-top: 4px;
    line-height: normal;
    font-size: 16px;
}

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: LouisGac

Please Log in to join the conversation.

More
1 month 2 weeks ago #158050 by wizard2none
wizard2none replied the topic: Change font size of multiple choice subquestions
Yep--you are right. That fixed the problem and everything looks great.

Thanks for your help.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now