Skip to main content

​
Overview

Width utilities cover fixed size steps, fractions, and keyword widths in one suffix system.
PatternSupported 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>
PatternSupported classesWhat 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-7xlFixed 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>
PatternSupported classesWhat it controls
width-<fraction>width-1-2, width-1-3, width-2-3, width-1-4, width-3-4Width 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>
PatternSupported classesWhat it controls
width-fullwidth-fullFills 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>
PatternSupported classesWhat it controls
width-screenwidth-screenMatches 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>
PatternSupported classesWhat it controls
width-autowidth-autoSizes 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.

Max Width

Constrain maximum element width

Height

Control element height