Tachyons
v4.12.0
Debugging Debug Grid Box sizing Spacing Floats Clearfix Display Widths Basic Grid Flexbox Max Widths Heights Position

Max Widths

The max-widths module contains both a ten-step scale based on powers of two as well as the ability to constrain element widths to a maximum of 100%.

Max widths can be combined with widths to ensure that your content doesn’t get too wide on larger monitors. Max-widths can also help keep embedded media within the canvas. As they are fluid across ranges of screen widths, max-widths are extremely useful when trying to keep a design responsive.

Class name structure is as follows: 

Base:
  mw = width

Modifiers
  1  = 1st step in width scale
  2  = 2nd step in width scale
  3  = 3rd step in width scale
  4  = 4th step in width scale
  5  = 5th step in width scale
  6  = 6th step in width scale
  7  = 7th step in width scale
  8  = 8th step in width scale
  9  = 9th step in width scale

  -100  = literal value %
  -none  = none

Media Query Extensions:
  -ns = not-small
  -m  = medium
  -l  = large

Examples

Max Width Scale

.mw1
Lorem
.mw2
Lorem
.mw3
Lorem ipsum dolor sit amet, consetetur sadipscing
.mw4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
.mw5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
.mw6
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.mw7
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.mw8
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.mw9
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Max Width Percentages

mw-100

Previous

Widths

Next

Heights

Reference

MDN - Max Width

tachyons-max-widths

v4.0.6 249 B
Declarations
44
Selectors
44
Max. Specificity Score
10
Size of Avg. Rule
1
src/_max-widths.css 

/*

   MAX WIDTHS
   Docs: http://tachyons.io/docs/layout/max-widths/

   Base:
     mw = max-width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

/* Max Width Percentages */

.mw-100  { max-width: 100%; }

/* Max Width Scale */

.mw1  {  max-width: 1rem; }
.mw2  {  max-width: 2rem; }
.mw3  {  max-width: 4rem; }
.mw4  {  max-width: 8rem; }
.mw5  {  max-width: 16rem; }
.mw6  {  max-width: 32rem; }
.mw7  {  max-width: 48rem; }
.mw8  {  max-width: 64rem; }
.mw9  {  max-width: 96rem; }

/* Max Width String Properties */

.mw-none { max-width: none; }

@media (--breakpoint-not-small) {
  .mw-100-ns  { max-width: 100%; }

  .mw1-ns  {  max-width: 1rem; }
  .mw2-ns  {  max-width: 2rem; }
  .mw3-ns  {  max-width: 4rem; }
  .mw4-ns  {  max-width: 8rem; }
  .mw5-ns  {  max-width: 16rem; }
  .mw6-ns  {  max-width: 32rem; }
  .mw7-ns  {  max-width: 48rem; }
  .mw8-ns  {  max-width: 64rem; }
  .mw9-ns  {  max-width: 96rem; }

  .mw-none-ns { max-width: none; }
}

@media (--breakpoint-medium) {
  .mw-100-m  { max-width: 100%; }

  .mw1-m  {  max-width: 1rem; }
  .mw2-m  {  max-width: 2rem; }
  .mw3-m  {  max-width: 4rem; }
  .mw4-m  {  max-width: 8rem; }
  .mw5-m  {  max-width: 16rem; }
  .mw6-m  {  max-width: 32rem; }
  .mw7-m  {  max-width: 48rem; }
  .mw8-m  {  max-width: 64rem; }
  .mw9-m  {  max-width: 96rem; }

  .mw-none-m { max-width: none; }
}

@media (--breakpoint-large) {
  .mw-100-l  { max-width: 100%; }

  .mw1-l  {  max-width: 1rem; }
  .mw2-l  {  max-width: 2rem; }
  .mw3-l  {  max-width: 4rem; }
  .mw4-l  {  max-width: 8rem; }
  .mw5-l  {  max-width: 16rem; }
  .mw6-l  {  max-width: 32rem; }
  .mw7-l  {  max-width: 48rem; }
  .mw8-l  {  max-width: 64rem; }
  .mw9-l  {  max-width: 96rem; }

  .mw-none-l { max-width: none; }
}