> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Breakpoints

> The shipped `--on-*` suffix system for structural classes at each breakpoint.

export const ResponsiveUtilitiesDemo = () => {
  const [viewportWidth, setViewportWidth] = useState(1024);
  const getActiveBreakpoint = width => {
    if (width >= 2400) return "--on-xxl";
    if (width <= 767) return "--on-xs";
    if (width <= 880) return "--on-s";
    if (width <= 1024) return "--on-m";
    if (width <= 1200) return "--on-l";
    if (width <= 1366) return "--on-xl";
    return "base";
  };
  const active = getActiveBreakpoint(viewportWidth);
  const bps = ["--on-xs", "--on-s", "--on-m", "--on-l", "--on-xl", "base", "--on-xxl"];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-4">
        <span className="tw-label">Simulated viewport: {viewportWidth}px</span>
        <input type="range" min="320" max="2600" value={viewportWidth} onChange={e => setViewportWidth(Number(e.target.value))} style={{
    width: "100%",
    accentColor: "#38bdf8"
  }} />
        <div className="flex flex-wrap gap-2">
          {bps.map(bp => <span key={bp} style={{
    padding: "0.25rem 0.75rem",
    borderRadius: "9999px",
    fontSize: "0.75rem",
    fontWeight: 600,
    background: active === bp ? "rgba(56, 189, 248, 0.2)" : "var(--demo-panel)",
    color: active === bp ? "#38bdf8" : "var(--demo-fg-faint)",
    border: active === bp ? "1px solid rgba(56, 189, 248, 0.4)" : "1px solid var(--demo-panel-border)"
  }}>{bp}</span>)}
        </div>
      </div>
    </div>;
};

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Breakpoints.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=45b255c33cb3e72eb6115363ed776a03" className="dark:hidden block" alt="Breakpoints overview cover" width="4054" height="2489" data-path="images-for-overview/Breakpoints.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Breakpoints%20-%20Dark.png" className="hidden dark:block" alt="Breakpoints overview cover (dark)" />
</div>

## Overview

The bundled framework ships responsive suffix variants for structural utilities. Instead of prefix syntax, Skelementor appends a breakpoint suffix to the class name.

That is **discrete** responsive behavior at thresholds. It differs from **fluid scaling** (for example `clamp()` on font sizes), which changes continuously with the viewport—see [Fluid scaling](/concepts/fluid-scaling).

## Breakpoint Map

| Suffix     | Media query         | Usage                      |
| ---------- | ------------------- | -------------------------- |
| `--on-xxl` | `min-width: 2400px` | Widescreen and above       |
| `--on-xl`  | `max-width: 1366px` | Laptop and below           |
| `--on-l`   | `max-width: 1200px` | Tablet landscape and below |
| `--on-m`   | `max-width: 1024px` | Tablet and below           |
| `--on-s`   | `max-width: 880px`  | Mobile landscape and below |
| `--on-xs`  | `max-width: 767px`  | Mobile only                |

## Example

<Tip>Use the interactive demo to see how breakpoint thresholds relate to the `--on-*` suffix system.</Tip>

<ResponsiveUtilitiesDemo />

```html theme={null}
<div class="elementor-element flex flex-col flex-row--on-m gap-4">
  <div class="width-1-2 padding-4 background-primary text-white rounded">
    A
  </div>
  <div class="width-1-2 padding-4 background-gray-light rounded">
    B
  </div>
</div>
```

## Supported Families

* Display: `.hidden`, `.block`, `.inline-block`, `.flex`, `.inline-flex`
* Overflow: `.overflow-hidden`, `.overflow-auto`, `.overflow-visible`
* Object fit: `.object-contain`, `.object-cover`, `.object-fill`, `.object-none`, `.object-scale-down`
* Aspect ratio: `.aspect-square`, `.aspect-video`, `.aspect-auto`
* Positioning: `.static`, `.relative`, `.absolute`, `.fixed`, `.sticky`
* Z-index: `.z-0`, `.z-10`, `.z-20`, `.z-30`, `.z-40`, `.z-50`, `.z-60`, `.z-70`, `.z-80`, `.z-90`, `.z-100`
* Flex direction: `.flex-row`, `.flex-col`, reverse variants
* Flex wrap: `.flex-wrap`, `.flex-nowrap`, `.flex-wrap-reverse`
* Alignment: `.justify-*`, `.items-*`, `.self-*`, `.content-*`
* Flex basis: `.basis-auto`, `.basis-full`, `.basis-0`, `.basis-px`, `.basis-1-2`, `.basis-1-3`, `.basis-2-3`, `.basis-1-4`, `.basis-3-4`
* Order: `.order-first`, `.order-last`

## Best Practices

* Use suffixes only for structural shifts, not for every class on the page.
* Keep the base class readable first, then add the responsive override.
* Prefer a small number of breakpoint changes over stacking many suffixes on one element.
* Pair responsive suffixes with the standard spacing and sizing utilities that remain stable across breakpoints.