> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Width, Height, and Min/Max Sizing Utilities in AtomicKit
> Control element dimensions in Elementor with AtomicKit's width, height, and min/max sizing utilities using a t-shirt scale, fractions, and keyword helpers.
AtomicKit's sizing utilities give you direct control over how wide and tall your Elementor elements are — without touching a style panel. You can constrain a content rail to a readable line length, make an image stretch its container, set a hero section to fill the viewport, or define minimum and maximum bounds that adapt cleanly to any screen width. All sizing utilities compose with each other and with spacing utilities, so centering a bounded content column takes just two or three classes.
`width-*` — Set an element's width using the t-shirt scale, fractions, or keyword helpers
`height-*` — Set an element's height using the same scale, fractions, and keywords
`maximum-width-*` — Cap an element's maximum width so it never grows beyond a set size
`minimum-width-*` — Ensure an element never collapses below a minimum width
`maximum-height-*` — Prevent an element from growing taller than a set value
`minimum-height-*` — Guarantee a minimum height even when content is sparse
## T-Shirt Size Scale
All six sizing families (`width-*`, `height-*`, `maximum-width-*`, `minimum-width-*`, `maximum-height-*`, `minimum-height-*`) share the same named size ladder, from `3xs` up to `7xl`.
| Token | rem | px | Typical use |
| ----- | ----- | ------ | --------------------------------------- |
| `3xs` | 16rem | 256px | Narrow sidebar widget, avatar area |
| `2xs` | 20rem | 320px | Mobile card width, compact panel |
| `xs` | 24rem | 384px | Small modal, narrow content block |
| `sm` | 28rem | 448px | Standard card, sidebar column |
| `md` | 32rem | 512px | Default medium container |
| `lg` | 36rem | 576px | Medium content rail, form column |
| `xl` | 40rem | 640px | Wide card, standard prose column |
| `2xl` | 48rem | 768px | Comfortable reading width |
| `3xl` | 56rem | 896px | Tablet-width content area |
| `4xl` | 64rem | 1024px | Wide content rail |
| `5xl` | 72rem | 1152px | Desktop container, full-width card |
| `6xl` | 80rem | 1280px | Wide layout column |
| `7xl` | 90rem | 1440px | Maximum content width for large screens |
Use `maximum-width-*` with a t-shirt size rather than `width-*` for most content containers. A max-width lets the element shrink on smaller screens while capping growth on large ones — the right default for almost every layout component.
## Fractional Widths
Fractional width utilities express dimensions as percentages of the parent container. The class name uses a hyphenated fraction: `1-2` means one-half, `1-3` means one-third, and so on.
| Token | Value | Example use |
| ----------- | ------- | ------------------------- |
| `width-1-2` | 50% | Two-column split |
| `width-1-3` | 33.333% | Three-column left panel |
| `width-2-3` | 66.666% | Three-column main content |
| `width-1-4` | 25% | Quarter-width sidebar |
| `width-3-4` | 75% | Three-quarter main area |
The same fractional tokens apply to `height-*`, `maximum-width-*`, `minimum-width-*`, `maximum-height-*`, and `minimum-height-*`.
## Keyword Helpers
Four keyword values round out the sizing system, each with a specific behavioral meaning.
| Keyword | Value | Behavior |
| -------- | ------------- | ------------------------------------------------------ |
| `px` | 1px | Sets a fixed 1px dimension — useful for hairline rules |
| `full` | 100% | Fills 100% of the parent's dimension |
| `screen` | 100vw / 100vh | Fills 100% of the viewport width or height |
| `auto` | auto | Defers to the browser's natural sizing algorithm |
**`px`** — Use `width-px` or `height-px` to set a dimension to exactly 1px. This is primarily useful for hairline dividers or precisely sized decorative rules where a sub-pixel value would be invisible.
```
width-px
```
**`full`** — Use `width-full` to stretch an element across its entire parent container. Use `height-full` to match a sibling's height when they share a flex row. This is the most common sizing keyword.
```
width-full
```
**`screen`** — Use `width-screen` for elements that must span the full viewport regardless of any parent constraints (for example, a full-bleed background section). Use `height-screen` for a hero that occupies exactly the viewport height.
```
width-screen
height-screen
```
`width-screen` overflows any padded parent container. Use it on outermost sections or pair it with negative margins to break out of a container. For most full-width backgrounds, Elementor's section-level stretch setting is a simpler choice.
**`auto`** — Use `width-auto` or `height-auto` to restore browser-default sizing and remove a fixed dimension. The most practical application is `maximum-height-auto`, which removes a previously applied maximum height constraint.
```
maximum-height-auto
```
## Min and Max Patterns
Minimum and maximum sizing utilities follow the exact same token vocabulary as `width-*` and `height-*`. Combine them with base sizing utilities to create flexible, bounded layouts.
| Pattern | What it does |
| ----------------------- | ----------------------------------------------------------- |
| `maximum-width-` | Element grows up to the named size, then stops |
| `minimum-width-` | Element never shrinks below the named size |
| `maximum-height-` | Element grows up to the named height, then clips or scrolls |
| `minimum-height-` | Element maintains at least the named height even when empty |
| `maximum-width-full` | Constrains element to its parent's width |
| `maximum-height-auto` | Removes a max-height constraint |
## Common Patterns
The following compositions cover the most frequent real-world sizing needs in Elementor layouts.
### Responsive image
A fluid image that stretches to fill its container but never exceeds a comfortable display width:
```
width-full maximum-width-2xl
```
The image fills narrow containers naturally and caps at 48rem on wider screens.
### Full-viewport hero section
A hero that always occupies the full browser window:
```
width-full height-screen
```
Pair with `padding-vertical-*` to ensure the hero's content has breathing room at any window height.
### Centered content rail
The canonical layout for a readable content column, horizontally centered on the page:
```
width-full maximum-width-3xl margin-horizontal-auto
```
`width-full` lets the column be fluid on mobile, `maximum-width-3xl` caps it at 56rem on larger screens, and `margin-horizontal-auto` centers it within the parent.
### Constrained sidebar
A sidebar that is always at least `xs` wide but never exceeds `sm`, keeping it usable at all viewport sizes:
```
minimum-width-xs maximum-width-sm
```
## Best Practices
Fixed widths break responsive layouts. `maximum-width-3xl` lets your container be narrower on small screens while preventing it from becoming unreadably wide on large ones.
A max-width alone left-aligns the element. Add `margin-horizontal-auto` to distribute the remaining horizontal space equally and center the block.
Full-viewport-height layouts are powerful for heroes but problematic for content-heavy sections. Short content leaves awkward blank space; long content overflows. Reserve `height-screen` for intentional, visually designed hero sections.
Testimonial carousels, dynamic post grids, and other conditionally populated elements can collapse to zero height when empty. Add `minimum-height-xs` or similar to preserve layout space and avoid jarring reflows.
Apply `width-1-2` or `width-1-3` to child widgets inside a flex container to create consistent column splits. Pair with a `gap-*` utility on the parent for clean gutters between columns.