Width

Control width with size, fraction, and keyword width utilities.

Overview

Width utilities cover fixed size steps, fractions, and keyword widths in one suffix system.

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

Examples

Using the size scale

Use the t-shirt width scale when you want a predictable fixed content width for cards, panels, and shells.

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

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

Using a percentage

Use fractional width utilities when the layout itself is column-based and width should be relative to the parent.

<div class="elementor-element flex gap-2 width-full">
  <div class="width-1-3 padding-3 background-primary text-white rounded text-center text-sm font-bold">
    width-1-3
  </div>
  <div class="width-2-3 padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    width-2-3
  </div>
</div>

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

Filling the available width

Use width-full when an element should stretch across the full available width of its parent.

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

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

Matching the viewport

Use width-screen when an element should span the full viewport width instead of just the width of its parent container.

<div class="elementor-element overflow-hidden rounded-lg">
  <div class="width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    width-screen
  </div>
</div>

Pattern	Supported classes	What it controls
width-screen	width-screen	Matches the viewport width

Resetting the width

Use width-auto when an element should size itself to its content or when you need to remove a previously assigned width.

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

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

Best Practices

• Use width-full for forms, rows, and blocks that should stretch with their parent.
• Use width-<fraction> when the layout itself is column-based.
• Use width-<size> for fixed shells and readable content rails.
• Use width-screen sparingly because it ignores the document container width.

Related Utilities

Max Width

Constrain maximum element width

Height

Control element height