Helper classes

Text alignment (text-align)

You can use helper classes to align text and certain elements differently by the viewport's width (screen size). For example, if you need to right align some text on large screens, but you need the same text centered on medium-sized screens, and left aligned on mobile, you can add all these three classes to the same element, module or group:

align-right medium-align-center small-align-left

Please keep in mind that these classes have no higher priority than any overqualified selector, where the same property is defined. Example:

.my-element .my-element-child .this { text-align: center; }

Or, if the property used by a simpler selector is defined with !important. Example:

.simple-selector { text-align: center !important; }

Spacing (margin/padding)

Following the same principle, you can use these breakpoints to adjust the top and bottom margin, from 0 to 100, in steps of 10 pixels (0, 10, 20, 30... 100), and the padding, in all directions (top, right, bottom, left):

Visibility (display: none/block)

You can also hide or display an element at a specific viewport width. For this property we do use !important: