Design & features
Responsive Design
Brigade blocks are responsive out of the box. When you want more control, almost every size, spacing and layout value can be set separately for desktop, tablet and mobile.
Breakpoints
| Device | Screen width | Inherits from |
|---|---|---|
| Desktop | 1024px and wider (and the base for all sizes) | — |
| Tablet | 600px – 1023px | Desktop |
| Mobile | 599px and narrower | Tablet, then Desktop |
Values are inherited downwards: set something on Desktop and it applies everywhere, until you set a different value on Tablet or Mobile. Developers can change the breakpoints with the wpbb_style_breakpoints filter (see Developer hooks); the editor and the front end follow automatically.
Three ways blocks adapt
- Automatically. Many blocks adapt on their own: Text Editor columns collapse on small screens, Tabs in vertical orientation move above the panel below 782px, alternating Timelines and Process Steps become one-column below 782px, Google Maps moves its info card below the map on phones, and charts shrink.
- Block settings with device values. Blocks with grids have Columns (desktop), Columns (tablet) and Columns (mobile) (Posts, Products, Gallery, Video Gallery, Product Categories, Statistics Cards). The Spacer has Desktop/Tablet/Mobile heights; Google Maps has a Mobile height.
- The Styles tab Device picker. Choose Tablet or Mobile in the Style panel and change any device-aware value (see the “Per device” column in Styling Controls).
Styling per device, step by step
- Select the block and open the Styles tab.
- In the Style panel, click Mobile (or Tablet). The editor preview switches to that size.
- Change the value — for example Spacing → Padding 24px or Typography → Font size 28px. The hint under the device buttons reminds you that empty values inherit larger screens.
- Switch back to Desktop to check that the desktop value is unchanged.
- Preview on a real phone before publishing.
Common recipes
Columns side by side on desktop, stacked on phones
Use a Container with the Two columns or Three columns layout — they are already set up this way. For your own layouts: Container → Styles → Device Mobile → Layout → Direction: Column.
A grid of 3 → 2 → 1 columns
Container → Styles → Layout type: Grid, Columns 3 on Desktop, 2 on Tablet, 1 on Mobile.
Smaller headings on phones
Heading → Styles → Element Title → Device Mobile → Typography → Font size.
Less space around sections on phones
Container → Styles → Device Mobile → Spacing → Padding. Or use the Spacer’s Mobile height.
Change the order on phones
Select the block inside a Container → Styles → Device Mobile → Flex item → Order. Remember: screen readers still follow the editor order.
Show a block only on phones (or only on desktop)
Block → Styles → Visibility → switch off the devices where it should be hidden. In the editor, blocks hidden on the previewed device are faded, not removed, so you can still edit them.
Hiding content per device
The Visibility panel (every block with the panel) hides content by device with CSS; the content is still in the HTML.
Never rely on device hiding for private information — hidden content can still be read in the page source.
Testing responsive layouts
- Use the editor’s device preview (the Styles tab Device picker switches it for you, or use Preview in the top toolbar).
- Resize your browser window on the published page, or use your browser’s developer tools device mode.
- Always check at least one real phone — touch interactions (carousels, before/after sliders, flip boxes) behave differently from a mouse.