Sizing
Easily make adjustments to the width and height to an element with our responsive sizing utility classes.
Usage
You can change the width and height of an element by using {property}-{size}
Notation:
- You can target the breakpoint class by using
{property}-{breakpoint}-{size}.
- The optional breakpoint being one of our five breakpoints, outlined below.
- Due to mesh being mobile first, these classes affect the breakpoint and upwards, for example -
w-tab-40 will make the element 100% width at mobile then scale up at tablet to
become 40% width of the container.
Properties:
| Width |
Properties |
| .w-10 |
width: 10%; |
| .w-20 |
width: 20%; |
| .w-30 |
width: 30%; |
| .w-40 |
width: 40%; |
| .w-50 |
width: 50%; |
| .w-60 |
width: 60%; |
| .w-70 |
width: 70%; |
| .w-80 |
width: 80%; |
| .w-90 |
width: 90%; |
| .w-10 |
width: 100%; |
| Height |
Properties |
| .h-10 |
height: 10%; |
| .h-20 |
height: 20%; |
| .h-30 |
height: 30%; |
| .h-40 |
height: 40%; |
| .h-50 |
height: 50%; |
| .h-60 |
height: 60%; |
| .h-70 |
height: 70%; |
| .h-80 |
height: 80%; |
| .h-90 |
height: 90%; |
| .h-10 |
height: 100%; |
Full screen
You can make an element span all of the viewport horiziontally or vertically by using the full-width and full-height classes.
<div class="full-width"></div>
<div class="full-height"></div>
Examples
Responsive width:
Here these divs are 100% width at mobile then scale up at tablet to become 40% width of the container. Go ahead
and resize the screen to see the effect.
w-100 w-tab-40
w-100 w-tab-40
<div class="w-100 w-tab-40">w-100 w-tab-40</div>
<div class="w-100 w-tab-40">w-100 w-tab-40</div>
Responsive height:
Here the first div is 60% height of the container and then moves down to 40% for desktop, the last div is doing
the reverse.
w-100 h-60 h-desk-40
w-100 h-40 h-desk-60
<div class="w-100 h-60 h-desk-40">w-100 h-60 h-desk-40</div>
<div class="w-100 h-40 h-desk-60">w-100 h-40 h-desk-60</div>
Variations
<!-- Default -->
<div class="w-10"></div>
<div class="w-20"></div>
<div class="w-30"></div>
<div class="w-40"></div>
<div class="w-50"></div>
<div class="w-60"></div>
<div class="w-70"></div>
<div class="w-80"></div>
<div class="w-90"></div>
<div class="w-100"></div>
<!-- Mobile -->
<div class="w-mob-10"></div>
<div class="w-mob-20"></div>
<div class="w-mob-30"></div>
<div class="w-mob-40"></div>
<div class="w-mob-50"></div>
<div class="w-mob-60"></div>
<div class="w-mob-70"></div>
<div class="w-mob-80"></div>
<div class="w-mob-90"></div>
<div class="w-mob-100"></div>
<!-- Tablet -->
<div class="w-tab-10"></div>
<div class="w-tab-20"></div>
<div class="w-tab-30"></div>
<div class="w-tab-40"></div>
<div class="w-tab-50"></div>
<div class="w-tab-60"></div>
<div class="w-tab-70"></div>
<div class="w-tab-80"></div>
<div class="w-tab-90"></div>
<div class="w-tab-100"></div>
<!-- Desktop -->
<div class="w-desk-10"></div>
<div class="w-desk-20"></div>
<div class="w-desk-30"></div>
<div class="w-desk-40"></div>
<div class="w-desk-50"></div>
<div class="w-desk-60"></div>
<div class="w-desk-70"></div>
<div class="w-desk-80"></div>
<div class="w-desk-90"></div>
<div class="w-desk-100"></div>
<!-- HD -->
<div class="w-hd-10"></div>
<div class="w-hd-20"></div>
<div class="w-hd-30"></div>
<div class="w-hd-40"></div>
<div class="w-hd-50"></div>
<div class="w-hd-60"></div>
<div class="w-hd-70"></div>
<div class="w-hd-80"></div>
<div class="w-hd-90"></div>
<div class="w-hd-100"></div>
Variables
Add or remove width & height responsive classes with the map variable below.
