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

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

Makes any child elements with the classname prefix .lrn-qe-col-[size]-[number of columns] be responsive based on this element size

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

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