Skip to main content
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

width-* — Set an element’s width using the t-shirt scale, fractions, or keyword helpers

Height

height-* — Set an element’s height using the same scale, fractions, and keywords

Max Width

maximum-width-* — Cap an element’s maximum width so it never grows beyond a set size

Min Width

minimum-width-* — Ensure an element never collapses below a minimum width

Max Height

maximum-height-* — Prevent an element from growing taller than a set value

Min Height

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.
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. 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. 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.
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.
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 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.

​
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.

​
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:
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:
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 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:

​
Best Practices

1

Default to maximum-width, not width, for content containers

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.
2

Always pair maximum-width with margin-horizontal-auto for centering

A max-width alone left-aligns the element. Add margin-horizontal-auto to distribute the remaining horizontal space equally and center the block.
3

Use height-screen sparingly

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.
4

Use minimum-height for empty-state containers

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.
5

Combine fractional widths with flex for multi-column layouts

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.