diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index eabb4653ac..782186c977 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,16 +4,9 @@ title: Sizing group: utilities --- -Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. +Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. -Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. - -{% example html %} -
Width 25%
-
Width 50%
-
Width 75%
-
Width 100%
-{% endexample %} +Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. {% example html %}
@@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
{% endexample %} -You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} Max-width 100% diff --git a/scss/_variables.scss b/scss/_variables.scss index dfbe891a56..be8caa3424 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -148,7 +148,7 @@ $spacers: ( 5: ($spacer * 3) ) !default; -// This variable affects the `.h-*` and `.w-*` classes. +// This variable affects the `.h-*` classes. $sizes: ( 25: 25%, 50: 50%, diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss index a7dc3e49b8..9b4acf2268 100644 --- a/scss/utilities/_sizing.scss +++ b/scss/utilities/_sizing.scss @@ -1,6 +1,6 @@ // Width and height -@each $prop, $abbrev in (width: w, height: h) { +@each $prop, $abbrev in (height: h) { @each $size, $length in $sizes { .#{$abbrev}-#{$size} { #{$prop}: $length !important; } }