Classname | Description |
.lrn-qe-divider | Creates a 1px gray border horizontal divider |
.lrn-qe-inline-block | Makes the element become inline-block |
.lrn-qe-margin-[direction]-[size] |
Adds margin to selected element based on the provided direction and size Refer to Direction and size section for what directions and sizes Learnosity supports |
.lrn-qe-padding-[direction]-[size] |
Adds margin to selected element based on the provided direction and size Refer to Direction and size section for what directions and sizes Learnosity supports |
.lrn-qe-text-center | Center text |
.lrn-qe-row-flex |
Makes any child elements with the classname prefix .lrn-qe-col-[size]-[number of columns] be responsive based on this element size |
.lrn-qe-col-[size]-[number of columns] |
Makes the selected element become responsive based on the provided size and number of columns. Be mindful that the selected element size is based on its container size instead of the screen size You can repeat this classname with different [size]and [columns] to make the selected element responsive based on container size Example: <div id="container" class="lrn-qe-row-flex"> <div id="firstElement" class="lrn-qe-col-xs-12 lrn-qe-col-sm-6"> <div>First element</div> </div> <div id="secondElement" class="lrn-qe-col-xs-12 lrn-qe-col-sm-6"> <div>Second element</div> </div> </div> Will make the #firstElement and #secondElement:
Refer to Responsive columns size and Number of responsive columns sections for the sizes and number of responsive columns Learnosity supports |
.lrn-qe-col-[size]-offset-[number of columns] |
Adds margin-left to selected element based on the provided size and columns Refer to Responsive columns size and Number of responsive columns sections for what sizes and responsive column formats Learnosity supports |
.lrn-qe-text-bold | Bold text |
.lrn-qe-text-italic | Italic text |
Direction and size
Direction | Size (based on 14px as base font size) |
none | 0 |
xs | 0.35714em (5px) |
sm | 0.71429em (10px) |
md | 1.42857em (20px) |
lg | 2.85714em (40px) |
Responsive columns size
Direction | Size |
xs | 0 |
xsm | 430px |
sm | 500px |
md | 800px |
lg | 1100px |
Number of responsive column(s)
Number of columns | Parent container size |
1 | 8.3333333333% |
2 | 16.667% |
3 | 25% |
4 | 33.333% |
5 | 41.6667% |
6 | 50% |
7 | 58.333% |
8 | 66.667% |
9 | 75% |
10 | 83.333% |
11 | 91.667% |
12 | 100% |