General Padding
To adjust the padding click the lighter grey area to select the element you wish to change. We use VW to be more fluid with our spacing, however you will need to adjust each responsive level.
Section Padding
To adjust the padding click the lighter grey area to select the element you wish to change
Margins
To adjust the margins click the in the middle of the grey area to select the element you wish to change
Heights & Widths
Used to add viewport widths to elements within your page.
Viewport Height:
10% of the viewport (device) height
10vh10% of the viewport (device) height
Viewport Height:
20% of the viewport (device) height
20vh20% of the viewport (device) height
Viewport Height:
30% of the viewport (device) height
30vh30% of the viewport (device) height
Viewport Height:
40% of the viewport (device) height
40vh40% of the viewport (device) height
Viewport Height:
50% of the viewport (device) height
50vh50% of the viewport (device) height
Viewport Height:
60% of the viewport (device) height
60vh60% of the viewport (device) height
Viewport Height:
70% of the viewport (device) height
70vh70% of the viewport (device) height
Viewport Height:
80% of the viewport (device) height
80vh80% of the viewport (device) height
Viewport Height:
90% of the viewport (device) height
90vh90% of the viewport (device) height
Viewport Height:
100% of the viewport (device) height
100vh100% of the viewport (device) height
Viewport Width:
10% of the viewport (device) Width
10vw10% of the viewport (device) Width
Viewport Width:
20% of the viewport (device) width
20vw20% of the viewport (device) width
Viewport Width:
30% of the viewport (device) width
30vw30% of the viewport (device) width
Viewport Width:
40% of the viewport (device) width
40vw40% of the viewport (device) width
Viewport Width:
50% of the viewport (device) width
50vw50% of the viewport (device) width
Viewport Width:
60% of the viewport (device) width
60vw60% of the viewport (device) width
Viewport Width:
70% of the viewport (device) width
70vw70% of the viewport (device) width
Viewport Width:
80% of the viewport (device) width
80vw80% of the viewport (device) width
Viewport Width:
90% of the viewport (device) width
90vw90% of the viewport (device) width
Viewport Width:
100% of the viewport (device) width
100vw100% of the viewport (device) width
Container Width:
10% of the containing width
10pc10% of the containing width
Container Width:
20% containing width
20pc20% containing width
Container Width:
30% of the containing width
30pc30% of the containing width
Viewport Width:
40% of the containing width
40pc40% of the containing width
Viewport Width:
50% of the containing width
50vw50% of the containing width
Viewport Width:
60% of the containing width
60pc60% of the containing width
Viewport Width:
70% of the containing width
70pc70% of the containing width
Viewport Width:
80% of the containing width
80vw80% of the containing width
Viewport Width:
90% of the containing width
90pc90% of the containing width
Viewport Width:
100% of the containing width
100pc100% of the containing width
Radius
Click the box or element you want to change the values of
Borders
Click the box or element you want to change the values of.
Alignments
Change the alignment of any text element using this class.
Right Alignment
Center Alignment
Right Alignment
Flex
Flexing any element either horizontally or vertically
Flex The Horizontal
Flex The Horizontal
Flex The Horizontal
Flex The Vertical
Flex The Vertical
Flex The Vertical