Max Width

Setting the maximum width of an element.

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


max-w:sizemax-width: sizerem;
max-vwmax-width: 100vw;
max-w:fullmax-width: 100%;
max-w:fitmax-width: fit-content;
max-w:minmax-width: min-content;
max-w:maxmax-width: max-content;
max-w:screen-4xsmax-width: 22.5rem;
max-w:screen-3xsmax-width: 30rem;
max-w:screen-2xsmax-width: 37.5rem;
max-w:screen-xsmax-width: 48rem;
max-w:screen-smmax-width: 52.125rem;
max-w:screen-mdmax-width: 64rem;
max-w:screen-lgmax-width: 80rem;
max-w:screen-xlmax-width: 90rem;
max-w:screen-2xlmax-width: 100rem;
max-w:screen-3xlmax-width: 120rem;
max-w:screen-4xlmax-width: 160rem;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="max-w:full:hover max-w:full@sm max-w:full@dark max-w:full@print"></div>
Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.