This checklist modifies the Bricks Builder breakpoint system by renaming, adding, and adjusting breakpoint values.
This step is mandatory and time‑sensitive. Breakpoint changes must be completed early in the Bricks configuration process before any styles, templates, or components are created.
Checklist Objective
Define and lock the Bricks breakpoint names, icons, and widths so all responsive behavior is consistent and predictable across the site.
Important Notes
- Custom Bricks breakpoints are not saved in exported Bricks settings.
- Breakpoints are preserved by a full site backup.
- This checklist must be completed before any styling or template work.
Preconditions
- Bricks Builder — Core Settings is completed and approved
- Bricks Builder parent theme is installed and licensed
- Bricks child theme is active
- No global styles, templates, or components exist yet
Checklist Steps — Modify Bricks Breakpoints
1. Create a temporary test template
- Navigate to Bricks → Templates
- Tap Add New Template
- Title: Test Single
- Template type: Single
- Tap Save Draft
- Tap Edit with Bricks
2. Open the breakpoints popup
- In the Bricks editor, tap the 3 vertical dots in the top toolbar
- If the 3‑dot menu is not visible:
- Go to Bricks → Settings → General
- Enable Custom Breakpoints
- Return to the template editor
- Tapping the 3‑dot menu opens the Breakpoints popup
3. Edit Base breakpoint
- Tap Edit on the Base breakpoint
- Label: Desktop
- Icon: desktop
- Width: 1366
- Tap Update
4. Create Laptop breakpoint
- Tap + to create a new breakpoint
- Label: Laptop
- Icon: laptop
- Width: 1280
- Tap Create
5. Edit Tablet portrait breakpoint
- Tap Edit on Tablet portrait
- Width: 992
- Tap Update
6. Edit Mobile landscape breakpoint
- Tap Edit on Mobile landscape
- Width: 768
- Tap Update
7. Edit Mobile portrait breakpoint
- Tap Edit on Mobile portrait
- Width: 480
- Tap Update
8. Save breakpoints globally
- Close the breakpoints popup window
- Tap Save on the open template
- This action saves breakpoints for the entire site
9. Verify breakpoint configuration
- Confirm 5 breakpoint icons appear in the top toolbar
- Switch between breakpoints to confirm they are active
Required Output
- Custom Bricks breakpoints defined
- Breakpoint labels, icons, and widths applied exactly
- Five active breakpoints visible in the editor toolbar
- Breakpoint system ready for styling and templates
Pause & Lock
Bricks breakpoint definitions are now locked. Do not modify breakpoint names or widths during styling or template work.
Proceed to: Bricks — Global Styles System Checklist