Skip to main content

​
Overview

Min-width utilities use the same suffix families as width, so you can add a floor without switching naming systems.
PatternSupported values
minimum-width-<size>3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
minimum-width-<fraction>1-2, 1-3, 2-3, 1-4, 3-4
minimum-width-<value>px, auto, full, screen

​
Examples

​
Using the size scale

Use the t-shirt scale when an element should never shrink below a predictable readable width. 
<div class="elementor-element width-2xs overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-xl
  </div>
</div>
PatternSupported classesWhat it controls
minimum-width-<size>minimum-width-3xs, minimum-width-2xs, minimum-width-xs, minimum-width-sm, minimum-width-md, minimum-width-lg, minimum-width-xl, minimum-width-2xl, minimum-width-3xl, minimum-width-4xl, minimum-width-5xl, minimum-width-6xl, minimum-width-7xlMinimum widths based on the size ladder

​
Using a percentage

Use fractional min-width utilities when a child should keep a minimum share of the row, even as the layout compresses. 
<div class="elementor-element flex flex-wrap gap-4">
  <div class="minimum-width-1-2 flex-grow padding-4 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-1-2
  </div>
  <div class="minimum-width-1-2 flex-grow padding-4 background-success text-white rounded text-center text-sm font-bold">
    minimum-width-1-2
  </div>
</div>
PatternSupported classesWhat it controls
minimum-width-<fraction>minimum-width-1-2, minimum-width-1-3, minimum-width-2-3, minimum-width-1-4, minimum-width-3-4Minimum width as a percentage of the parent

​
Matching the parent width floor

Use minimum-width-full when an element should never shrink below the full width of its parent. 
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-full padding-3 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-full
  </div>
</div>
PatternSupported classesWhat it controls
minimum-width-fullminimum-width-fullUses the full parent width as a minimum floor

​
Matching the viewport floor

Use minimum-width-screen when an element should keep a viewport-width floor instead of collapsing with a narrower parent container. 
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="minimum-width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    minimum-width-screen
  </div>
</div>
PatternSupported classesWhat it controls
minimum-width-screenminimum-width-screenUses the viewport width as a minimum floor

​
Resetting the minimum width

Use minimum-width-auto when an element should fall back to the browser’s default minimum-width behavior. 
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-auto inline-block padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    minimum-width-auto
  </div>
</div>
PatternSupported classesWhat it controls
minimum-width-autominimum-width-autoResets the minimum width to automatic browser sizing

​
Best Practices

  • Use minimum-width-<size> when a panel, card, or rail should never collapse below a readable width.
  • Use minimum-width-<fraction> when flex items should keep a minimum share of the row.
  • Use minimum-width-full for children that must stay as wide as their parent.
  • Use minimum-width-screen carefully because it can force horizontal overflow inside narrow containers.

Width

Bundled width utilities

Max Width

Constrain maximum size alongside minimum width