Responsive design in Bricks runs on four breakpoints. Learn them once and most layout questions answer themselves. This sheet covers the defaults, the cascade, and when to touch anything.
The Four Defaults
Bricks ships with four breakpoints. They are on from the first page you build — no setup required.
| Breakpoint | Width | Typical device |
|---|---|---|
| Base | every width | desktop and above |
| 1280 px | 1280 and below | laptop, small desktop |
| 992 px | 992 and below | tablet landscape |
| 768 px | 768 and below | tablet portrait |
| 480 px | 480 and below | phone |
The breakpoint name is the maximum width it applies to: “1280” means 1280px and below, not exactly 1280px. A 390px phone sits inside the 480 breakpoint.
How Breakpoints Work
Base styles apply at every width. When you set a font size, padding or column count in base, it applies everywhere until a smaller breakpoint overrides it.
- Base — the default for everything, all widths.
- 1280 — overrides base at 1280px and below.
- 992 — overrides everything at 992px and below.
- 768 / 480 — same rule, stepping down.
| You set | In breakpoint | Where it applies |
|---|---|---|
| font-size: 18px | Base | all widths |
| font-size: 16px | 768 | 768px and below |
| grid columns: 3 | Base | all widths |
| grid columns: 1 | 480 | 480px and below |
The breakpoint switcher is the device icon at the top of the style panel. Pick a breakpoint and every change applies only at that width and below; a label shows the active one. Rule of thumb: set desktop values once in base, then change only what breaks.
Common Patterns
Five moves cover most responsive work.
| Pattern | Base | 992 | 768 | 480 |
|---|---|---|---|---|
| Grid columns | 3 | 2 | 2 | 1 |
| Heading size | 40px | 36px | 32px | 26px |
| Header nav | full menu | full menu | hamburger | hamburger |
| Container padding | 24px | 24px | 16px | 12px |
| Side-by-side blocks | row | row | stacked | stacked |
Three-column grids become two at 992 and one at 480. Type scales down in steps rather than one big jump. Long nav menus collapse to a hamburger at 768 — or at 992 if the menu has many items.
Custom Breakpoints
You can add breakpoints in Theme Styles → Breakpoints. Two cases justify it.
| Case | Breakpoint | Use |
|---|---|---|
| Large monitors | 1440 px | wider containers, an extra column |
| Ultrawide screens | 1920 px | cap content width, center the layout |
A new breakpoint applies from its width down to the next one below. Most sites never need either — every extra breakpoint is another state to test. Fewer is better; if the defaults handle your layout, leave them alone.
Container Widths
A consistent container rhythm keeps pages looking the same at every size. A good starting point:
| Breakpoint | Container max-width |
|---|---|
| Base | 1200 px |
| 992 | 992 px |
| 768 | 768 px |
| 480 | 100% with 16–20px padding |
Because max-width shrinks automatically, a 1200px container already fits a 992px viewport. Override only when content feels cramped — usually at 768 and 480.
Testing Checklist
Five minutes of testing catches most responsive failures. Run this list before you publish.
| Check | Pass condition |
|---|---|
| Text readable | no awkward heading wraps, comfortable line length |
| Buttons clickable | at least 44px tap targets, nothing overlapping |
| No horizontal scroll | page width equals viewport width at all four breakpoints |
| Images scale | no overflow, aspect ratios held |
| Nav works | hamburger opens, every menu item reachable |
| Forms usable | inputs full width, labels readable |
Check the four defaults plus one in-between size (600px, where phones and tablets blur). Device emulators in Chrome DevTools and Bricks’ preview are fine for daily work; a real phone catches quirks emulators miss.
The One-Column Rule
Design mobile-first. If a layout works at 480px it almost always scales up cleanly — the reverse is rarely true.
The rule itself: at 480px, everything stacks to a single column. No exceptions for critical content. A desktop layout that looks broken on a phone is a failed page; mobile visitors will not resize their window, they will leave.
Work top-down in practice: build in base, then step through 1280, 992, 768, 480, changing only what breaks. Most pages need three or four overrides total. That restraint is what keeps a Bricks site maintainable a year in.
New to the terms used here? The Bricks terminology glossary explains containers, theme styles and frames in plain English. When you are ready to put this responsive setup to work, the B2B export site walkthrough covers the full build from purchase to launch.
