Submit a request
Submit a request

CSS Classes for Customizing Question Editor HTML Layouts

 

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:

  • to have 100% container (#container) width when the container width is less than 500px
  • to have 50% container (#container) width when the container width is higher than 500px

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
md 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%
Was this article helpful?
0 out of 0 found this helpful

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.