Height

Overview

Height utilities cover fixed size steps, fractions, and keyword heights in one suffix system.

Pattern	Supported values
`height-<size>`	`3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`
`height-<fraction>`	`1-2`, `1-3`, `2-3`, `1-4`, `3-4`
`height-<value>`	`px`, `auto`, `full`, `screen`

Examples

Using the size scale

Use the t-shirt height scale when you want a predictable fixed height for media blocks, panels, and feature shells.

<div class="elementor-element">
  <div class="height-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    height-xl
  </div>
</div>

Pattern	Supported classes	What it controls
`height-<size>`	`height-3xs`, `height-2xs`, `height-xs`, `height-sm`, `height-md`, `height-lg`, `height-xl`, `height-2xl`, `height-3xl`, `height-4xl`, `height-5xl`, `height-6xl`, `height-7xl`	Fixed heights based on the size ladder

Using a percentage

Use fractional height utilities when height should be relative to a parent container instead of fixed to the t-shirt scale.

<div class="elementor-element height-3xs flex flex-col gap-1 rounded-lg overflow-hidden border-1 border-solid border-gray">
  <div class="height-1-3 flex items-center justify-center background-primary text-white rounded text-center text-sm font-bold">
    height-1-3
  </div>
  <div class="height-2-3 flex items-center justify-center background-secondary text-black rounded text-center text-sm font-bold">
    height-2-3
  </div>
</div>

Pattern	Supported classes	What it controls
`height-<fraction>`	`height-1-2`, `height-1-3`, `height-2-3`, `height-1-4`, `height-3-4`	Height as a percentage of the parent

Filling the available height

Use height-full when an element should stretch to match the height of a parent that already defines its own height.

<div class="elementor-element height-3xs rounded-lg padding-3 background-gray-light">
  <div class="height-full flex items-center justify-center background-success text-white rounded text-center text-sm font-bold">
    height-full
  </div>
</div>

Pattern	Supported classes	What it controls
`height-full`	`height-full`	Fills the available parent height

Matching the viewport

Use height-screen when a page shell, hero, or empty-state layout should match the viewport height.

<div class="elementor-element overflow-hidden rounded-lg">
  <div class="height-screen flex items-center justify-center background-primary text-white text-center text-sm font-bold">
    height-screen
  </div>
</div>

Pattern	Supported classes	What it controls
`height-screen`	`height-screen`	Matches the viewport height

Resetting the height

Use height-auto when height should fall back to the content instead of staying fixed or inherited from another rule.

<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="height-auto inline-block padding-3 background-primary text-white rounded text-center text-sm font-bold">
    height-auto
  </div>
</div>

Pattern	Supported classes	What it controls
`height-auto`	`height-auto`	Sizes to content or surrounding layout context

Best Practices

Use height-full only when a parent already establishes height.
Use height-screen for full-view shells, splash sections, and empty states.
Use height-<fraction> when the layout itself defines the parent height.
Use height-auto to remove a fixed height and let content determine the block size.

Width

Control element width

Min Height

Use matching minimum-height helpers

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Examples

Using the size scale

Using a percentage

Filling the available height

Matching the viewport

Resetting the height

Best Practices

Width

Min Height

​Overview

​Examples

​Using the size scale

​Using a percentage

​Filling the available height

​Matching the viewport

​Resetting the height

​Best Practices

​Related Utilities

Width

Min Height

Overview

Examples

Using the size scale

Using a percentage

Filling the available height

Matching the viewport

Resetting the height

Best Practices

Related Utilities