← All Features · PRO Feature

Cards That Adapt to Every Screen.

Design your card once, then tailor it for desktop, tablet, and mobile with per-breakpoint style overrides. Switch between responsive containers directly from the builder header bar to preview each layout in real time.

Upgrade to Pro View all features

Builder header bar with responsive container selector showing desktop, tablet, and mobile options

3: Built-in breakpoints
Visual: Container preview mode
Override: Any style per breakpoint
Live: Real-time responsive preview

What Are Responsive Containers?

One Card, Multiple Layouts

A responsive container is a special block that wraps your layout and applies different style configurations depending on the current screen size. No media query syntax — just visual configuration.

Diagram showing the same card rendered across desktop, tablet, and mobile containers

Breakpoint-based containers

Define separate style sets for Desktop (≥1024px), Tablet (768–1023px), and Mobile (<768px). Each container inherits the base styles and only overrides what differs.

Additive override system

Smaller breakpoints inherit from larger ones. Only specify the properties that change — everything else stays the same as the parent breakpoint.

Preview inside the builder

Use the container selector in the header bar to switch the canvas to any breakpoint. The live preview updates immediately to show how your card looks at that size.

Works with all block types

Every block type — text, image, layout, entities, controls — supports responsive overrides. Change font size, layout direction, visibility, spacing, and more.

Breakpoints

Three Built-in Screen Sizes

CardBuilder Pro ships with three standard breakpoints that map to the most common Home Assistant dashboard panel sizes.

Desktop

≥ 1024px

The base layout. All styles defined here are inherited by smaller breakpoints unless overridden. Design your desktop layout first.

Tablet

768px – 1023px

Override styles for medium-width panels. Adjust column counts, font sizes, and spacing to fit narrower dashboard layouts.

Mobile

< 768px

Optimise for small panels and compact views. Stack layouts vertically, reduce font sizes, and simplify visuals for mobile-first display.

Style Overrides

Change Only What Needs to Change

Switch to a breakpoint in the canvas and modify any style property. Your changes are stored as an override for that breakpoint only — the base layout remains untouched.

Change flex direction

Switch a horizontal row layout to a vertical column at mobile width so content stacks naturally in a narrow panel.

Adjust font sizes

Reduce heading and body text sizes at tablet and mobile breakpoints to maintain readability in smaller panels.

Hide non-essential blocks

Set certain decorative or secondary blocks to display:none at mobile to keep the card clean and focused at smaller sizes.

Modify spacing

Tighten padding and gap values at smaller breakpoints to make better use of limited horizontal space.

Styles panel showing breakpoint-specific overrides highlighted in blue on a tablet container

Design Once, Look Great Everywhere.

Responsive containers are available with CardBuilder Pro plans.

See Plans Read the Docs