Max Width - v3
The .max-width-{size} classes can be used to set the max-width of an element:
| CSS Class | Description |
|---|---|
m{p}ax-width-xxxxxs |
max-width: var(--max-width-xxxxxs) |
m{p}ax-width-xxxxs |
max-width: var(--max-width-xxxxs) |
m{p}ax-width-xxxs |
max-width: var(--max-width-xxxs) |
m{p}ax-width-xxs |
max-width: var(--max-width-xxs) |
m{p}ax-width-xs |
max-width: var(--max-width-xs) |
m{p}ax-width-sm |
max-width: var(--max-width-sm) |
m{p}ax-width-md |
max-width: var(--max-width-md) |
m{p}ax-width-lg |
max-width: var(--max-width-lg) |
m{p}ax-width-xl |
max-width: var(--max-width-xl) |
m{p}ax-width-xxl |
max-width: var(--max-width-xxl) |
m{p}ax-width-xxxl |
max-width: var(--max-width-xxxl) |
m{p}ax-width-xxxxl |
max-width: var(--max-width-xxxxl) |
m{p}ax-width-100% |
max-width: 100% |
m{p}ax-width-none |
max-width: none |
Responsive - edit the visibility utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl - e.g., .max-width-sm@md).
Optionally, you can update the default max-width variables by adding your own in the custom-style/_util.scss file:
:root {
--max-width-xxxxxs: 17.5rem; // ~280px
--max-width-xxxxs: 20rem; // ~320px
--max-width-xxxs: 26rem; // ~416px
--max-width-xxs: 32rem; // ~512px
--max-width-xs: 38rem; // ~608px
--max-width-sm: 48rem; // ~768px
--max-width-md: 64rem; // ~1024px
--max-width-lg: 80rem; // ~1280px
--max-width-xl: 90rem; // ~1440px
--max-width-xxl: 100rem; // ~1600px
--max-width-xxxl: 120rem; // ~1920px
--max-width-xxxxl: 150rem; // ~2400px
}If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} classes (example):
| CSS Class | Description |
|---|---|
m{p}ax-width-adaptive-sm |
set max-width equal to 512px by default, and 768px at breakpoint sm |
m{p}ax-width-adaptive-md |
set max-width equal to 512px by default, 768px at breakpoint sm, and 1024px at breakpoint md |
m{p}ax-width-adaptive-lg |
set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, and 1280px at breakpoint lg |
m{p}ax-width-adaptive-xl |
set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, 1280px at breakpoint lg, and 1440px at breakpoint xl |
