bricks_get_breakpoints
Phase 1BeginnerRead OnlyComplexity: 1/10
List all responsive breakpoint widths
Overview
Returns the list of all configured Bricks breakpoints with their keys, labels, and maximum-width values in pixels. Bricks uses a desktop-first responsive approach with five default breakpoints: desktop (base, no max-width), tablet_landscape (~1279px), tablet_portrait (~1024px), mobile_landscape (~768px), and mobile_portrait (~478px).
This tool is essential before applying responsive overrides. Understanding the available breakpoints ensures you use the correct key suffixes when setting per-breakpoint element settings via bricks_set_responsive_settings or inline responsive keys.
Key Features
Complete Breakpoint List
Returns all breakpoints including any custom breakpoints that have been configured, not just the five defaults. Each entry includes the key, label, and max-width in pixels.
Desktop-First Approach
Bricks uses desktop as the base (no max-width) and applies overrides at narrower breakpoints. The returned list is ordered from widest to narrowest.
When to Use
At the start of a project to understand the responsive framework (Phase 1)
Before calling bricks_set_responsive_settings to verify available breakpoint keys
When debugging responsive layout issues to confirm breakpoint max-width values
After custom breakpoints have been configured in Bricks settings
Before calling bricks_set_responsive_settings to verify available breakpoint keys
When debugging responsive layout issues to confirm breakpoint max-width values
After custom breakpoints have been configured in Bricks settings
Prerequisites
Bricks Builder must be active on the WordPress site.
When NOT to Use
If you already know the default Bricks breakpoints and their keys
To change breakpoint widths — that is done through the Bricks admin settings panel
To change breakpoint widths — that is done through the Bricks admin settings panel
Parameters
1 Total Parameters1 Optional
(none)noneoptionalThis tool takes no input parameters. It returns all responsive breakpoints with their widths.
Code Examples
Warning: Undefined array key "example_output" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 12
Read breakpoints and apply responsive overrides
First retrieve available breakpoints, then use the key values to apply responsive padding and grid column overrides.
JSON
// Step 1: Get available breakpoints
bricks_get_breakpoints()
// Returns: { breakpoints: [
// { key: "desktop", label: "Desktop", width: 0 },
// { key: "tablet_landscape", label: "Tablet Landscape", width: 1279 },
// { key: "tablet_portrait", label: "Tablet Portrait", width: 1024 },
// { key: "mobile_landscape", label: "Mobile Landscape", width: 768 },
// { key: "mobile_portrait", label: "Mobile Portrait", width: 478 }
// ] }
// Step 2: Use breakpoint keys for responsive settings
bricks_set_responsive_settings({
page_id: 42,
element_id: "abc123",
breakpoint: "mobile_portrait",
settings: {
_gridTemplateColumns: "1fr",
_padding: { top: "40", bottom: "40" }
}
})Common Mistakes
Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47
Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 2018
Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48
Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49
Breakpoint keys use underscores, not hyphens: "tablet_portrait" not "tablet-portrait", "mobile_portrait" not "mobile-portrait". Always verify with this tool first.
Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47
Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 2018
Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48
Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49
Desktop styles are the default — you do not add a ":desktop" suffix. Only non-desktop breakpoints need explicit overrides.
Tips & Warnings
Tips & Warnings
No parameters needed: This tool takes no arguments. It returns all breakpoints configured for the current Bricks installation.
Responsive key convention: Use the breakpoint key as a suffix on any CSS setting: _padding:mobile_portrait, _gridTemplateColumns:tablet_portrait, _typography:mobile_portrait, etc.
Return Values
Related Tools
Technical Details
Changelog
v1.0
Initial release with all default and custom breakpoint retrieval.
20250101