Breakpoints

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

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.

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

Use the interactive demo to see how breakpoint thresholds relate to the --on-* suffix system.

<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.