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.
TokenrempxTypical use
3xs16rem256pxNarrow sidebar widget, avatar area
2xs20rem320pxMobile card width, compact panel
xs24rem384pxSmall modal, narrow content block
sm28rem448pxStandard card, sidebar column
md32rem512pxDefault medium container
lg36rem576pxMedium content rail, form column
xl40rem640pxWide card, standard prose column
2xl48rem768pxComfortable reading width
3xl56rem896pxTablet-width content area
4xl64rem1024pxWide content rail
5xl72rem1152pxDesktop container, full-width card
6xl80rem1280pxWide layout column
7xl90rem1440pxMaximum 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.
TokenValueExample use
width-1-250%Two-column split
width-1-333.333%Three-column left panel
width-2-366.666%Three-column main content
width-1-425%Quarter-width sidebar
width-3-475%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.
KeywordValueBehavior
px1pxSets a fixed 1px dimension — useful for hairline rules
full100%Fills 100% of the parent’s dimension
screen100vw / 100vhFills 100% of the viewport width or height
autoautoDefers 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.
PatternWhat it does
maximum-width-<size>Element grows up to the named size, then stops
minimum-width-<size>Element never shrinks below the named size
maximum-height-<size>Element grows up to the named height, then clips or scrolls
minimum-height-<size>Element maintains at least the named height even when empty
maximum-width-fullConstrains element to its parent’s width
maximum-height-autoRemoves 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

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.