Skip to main content
AtomicKit offers two complementary approaches to responsiveness. For values like font sizes and spacing that should shift gradually as the viewport grows or shrinks, AtomicKit uses fluid scaling with CSS clamp(). For structural decisions — changing a flex direction, hiding an element, or reordering items — you need discrete control at specific breakpoints. The --on-* suffix system is how you express those layout shifts: append a breakpoint suffix to any supported class name and that override takes effect only at the viewport size you specify.

​
Breakpoint map

AtomicKit ships six breakpoints, covering everything from widescreen displays down to small mobile viewports. Each suffix maps to a CSS media query:
SuffixMedia QueryViewport
--on-xxlmin-width: 2400pxWidescreen and above
--on-xlmax-width: 1366pxLaptop and below
--on-lmax-width: 1200pxTablet landscape and below
--on-mmax-width: 1024pxTablet and below
--on-smax-width: 880pxMobile landscape and below
--on-xsmax-width: 767pxMobile only
Notice that --on-xxl uses min-width (a “wide and above” query), while all other suffixes use max-width (“this size and below”). Design mobile-first by setting your default class for small screens and overriding upward with --on-xxl, or design desktop-first and override downward with the max-width suffixes.

​
How to use responsive suffixes

Append the suffix directly to the end of the class name with no space. The base class always applies first; the suffixed variant overrides it when the media query is active. Syntax: 
{base-class}--on-{breakpoint}
Example — flex column that becomes a row on tablet and below: 
<!-- Applied via Elementor Advanced > CSS Classes field -->
flex flex-col flex-row--on-m
Here, flex enables flex display, flex-col sets the default direction to column, and flex-row--on-m overrides the direction to row at viewports 1024 px wide and below. You apply all three classes in the Advanced → CSS Classes field, space-separated, just like any other utility combination.
Always write the base class first for readability. Seeing flex-col flex-row--on-m makes it immediately clear what the default behavior is and where it changes.

​
Responsive layout example

The following class combination creates a three-column card grid that collapses to a single column on mobile: 
<!-- Container: row layout that stacks on small screens -->
flex flex-row flex-col--on-xs gap-6

<!-- Each card: full width on mobile, auto width otherwise -->
flex-basis-auto flex-basis-full--on-xs
And a navigation bar that hides on mobile and reappears on larger screens: 
<!-- Show on desktop, hide on mobile -->
flex hidden--on-xs
When you hide an element with a responsive suffix, the element is still in the DOM — only its display value changes. This is intentional for accessibility and SEO. If you need to remove content entirely on certain devices, use Elementor’s built-in responsive visibility controls instead.

​
Supported utility families

Responsive suffixes are available on structural utilities that affect layout and composition. They are intentionally not available on every utility family — fluid scaling handles continuous value shifts, so breakpoint overrides are reserved for genuinely discrete structural changes. The following families support --on-* suffixes:

Display

flex, block, inline, hidden, and related display values.

Overflow

overflow-hidden, overflow-auto, overflow-scroll, and axis variants.

Object Fit

object-cover, object-contain, object-fill, and related values.

Aspect Ratio

aspect-square, aspect-video, aspect-auto, and numeric ratios.

Positioning

relative, absolute, fixed, sticky, and static.

Z-Index

z-0 through z-50 and z-auto.

Flex Direction

flex-row, flex-col, flex-row-reverse, flex-col-reverse.

Flex Wrap

flex-wrap, flex-nowrap, flex-wrap-reverse.

Alignment

justify-*, items-*, self-*, and content-* alignment utilities.

Flex Basis & Order

flex-basis-* size steps and order-* values.

​
Best practices

Responsive suffixes exist to change how elements are arranged at different screen sizes — not to tweak every visual property at every breakpoint. Apply a suffix when the layout genuinely needs to reorganize (a row becomes a column, an element is hidden), not for minor stylistic adjustments. Fluid scaling handles gradual changes to font sizes and spacing automatically.
Write your default (unsuffixed) classes before any responsive overrides. Reading flex-col flex-row--on-m is immediately clear; reading flex-row--on-m flex-col forces the reader to figure out which is the default. Consistent ordering makes the CSS Classes field easier to scan.
Each additional breakpoint suffix adds cognitive overhead and increases the risk of conflicting overrides. Aim for one or two structural breakpoints per component. If you find yourself adding three or more suffixes to a single element, consider whether a simpler layout approach would serve the design better.
The breakpoint values in AtomicKit are chosen to align with common device categories, but real devices don’t always match. Use browser DevTools device emulation — and test on actual hardware when possible — to confirm your responsive overrides behave as expected.

​
Related concepts

For values that should scale gradually rather than jump at breakpoints, see the Fluid Scaling page. Font sizes, spacing, and gap values use CSS clamp() so a single class stays proportional across the full viewport range — no suffix needed.