Use Case 4. Scale items font size for the Matrix and Rating Scale types of question
Issue
This use case demonstrates how to manage fonts for the scale items of the Rating Scale and Matrixtype of questions.
In the following example scale items font is 8px and is similar for all elements. You can stress on some elements or make the font bigger for all of them.
![](../../__attachments/50888738/image2021-8-6_11-31-39.png?inst-v=782736d0-8879-4791-b558-515790c9ddd1)
Solution
If you would like to make the font bigger for the first and last column, add one of the following pieces of code on the survey Edit Layout>CSS page:
.aDivQuestion_Qxxx .H7,.aDivQuestion_Qxxx .H9 {font-size:16px}
OR
.aDivQId_questionIdentifier .H7,.aDivQId_questionIdentifier .H9 {font-size:16px}
.aDivQuestion_Q and .aDivQId_ | reference to the particular question; |
---|---|
XXX - | question sequence number; |
questionIdentifier | question custom identifier; |
.H7 .H9 - | represent the first and the last column in the scale; |
font-size: 16px - | increases font size to 16px; |
Result
As a result, given question will look as follows:
![](../../__attachments/50888738/image2021-8-6_11-33-54.png?inst-v=782736d0-8879-4791-b558-515790c9ddd1)
Depending on the number of columns in your question, the column parameters may change:
Column parameters for questions with scales | Example: |
H7,H8,H9, H12-H21 | 2 columns: H7-H9 |
For example, if you would like to make all column headers larger, and the scale contains of five columns, you may use the following piece of CSS code:
.aDivQuestion_Qxxx .H7,
.aDivQuestion_Qxxx .H12,
.aDivQuestion_Qxxx .H8,
.aDivQuestion_Qxxx .H13,
.aDivQuestion_Qxxx .H9 {font-size:12px}
OR
.aDivQId_questionIdentifier .H7,
.aDivQId_questionIdentifier .H12,
.aDivQId_questionIdentifier .H8,
.aDivQId_questionIdentifier .H13,
.aDivQId_questionIdentifier .H9 {font-size:12px}