Sizing

Max Width

Style syntax for setting the maximum width of an element.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
max-width:size / max-w:sizemax-width: sizerem
max-w:fullmax-width: size%
max-w:fitmax-width: fit-content
max-w:maxmax-width: max-content
max-w:maxmax-width: max-content
max-w:3xs / max-w:360max-width: 30rem
max-w:2xs / max-w:480max-width: 37.5rem
max-w:xs / max-w:600max-width: 48rem
max-w:sm / max-w:768max-width: 52.125rem
max-w:md / max-w:1024max-width: 64rem
max-w:lg / max-w:1280max-width: 80rem
max-w:xl / max-w:1440max-width: 90rem
max-w:2xl / max-w:1600max-width: sizerem
max-w:3xl / max-w:1920max-width: 120rem
max-w:4xl / max-w:2560max-width: 160rem

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="max-w:full:hover max-w:full@sm max-w:full@dark max-w:full@print"></div>
PREVIOUS
Max Height

Style syntax for setting the maximum height of an element.

NEXT
Min Height

Style syntax for setting the minimum height of an element.

MIT License © Aoyue Design LLC.