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; }
Class: Applicable on a viewport width, equal or smaller than (px):
align-left -
align-center -
align-right -
large-align-left 1079
large-align-center 1079
large-align-right 1079
medium-align-left 879
medium-align-center 879
medium-align-right 879
smedium-align-left 767
smedium-align-center 767
smedium-align-right 767
small-align-left 479
small-align-center 479
small-align-right 479
tiny-align-left 320
tiny-align-center 320
tiny-align-right 320

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):

Class: Applicable on a viewport width, equal or smaller than (px):
padding-horizontal-0
padding-vertical-0
padding-top-0
padding-right-0
padding-bottom-0
padding-left-0
margin-top-0
margin-bottom-0
-
padding-horizontal-10
padding-vertical-10
padding-top-10
padding-right-10
padding-bottom-10
padding-left-10
margin-top-10
margin-bottom-10
-
padding-horizontal-20
padding-vertical-20
padding-top-20
padding-right-20
padding-bottom-20
padding-left-20
margin-top-20
margin-bottom-20
-
...-30, ...-40, ...-50, ...-60, ...-70, ...-80, ...-90  
padding-horizontal-100
padding-vertical-100
padding-top-100
padding-right-100
padding-bottom-100
padding-left-100
margin-top-100
margin-bottom-100
-
same as above, but with the large- prefix in the class name.
Example: large-padding-horizontal-20
1079
same as above, but with the medium- prefix in the class name 879
same as above, but with the smedium- prefix in the class name 767
same as above, but with the small- prefix in the class name 479
same as above, but with the tiny- prefix in the class name 320

Visibility (display: none/block)

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

Class: Applicable on a viewport width, equal or smaller than (px):
hidden -
visible -
large-hidden 1079
large-visible 1079
medium-hidden 879
medium-visible 879
smedium-hidden 767
smedium-visible 767
small-hidden 479
small-visible 479
tiny-hidden 320
tiny-visible 320

HubSpot User Guides

You can explore and learn more about the HubSpot tools and features in the official HubSpot Academy.

HubSpot Academy | User Guides