bricks_set_responsive_settings

Phase 4IntermediateComplexity: 5/10

Set per-breakpoint overrides on elements

Overview

Overrides element settings at a specific responsive breakpoint. This tool handles the Bricks key:breakpoint convention automatically — you provide plain settings keys (without the breakpoint suffix), and the tool appends the correct suffix before saving. For example, providing _padding at breakpoint mobile_portrait results in the internal key _padding:mobile_portrait.

This is the targeted approach for responsive design — apply specific overrides to individual elements at specific breakpoints. For bulk responsive adjustments across an entire page, consider using bricks_auto_responsive instead.

Key Features

Automatic Key Suffixing

Provide plain settings keys like _padding, _gridTemplateColumns, or _typography — the tool automatically appends the :breakpoint suffix (e.g., _padding:mobile_portrait).

All CSS Properties Supported

Any element setting that Bricks supports can be overridden: layout (_display, _direction, _gridTemplateColumns), spacing (_padding, _margin, _gap), typography (_typography), sizing (_width, _height), and visibility (_display: none).

Content Area Support

Works on elements in page content, header templates, and footer templates via the content_area parameter.

When to Use

To make a grid collapse to single column on mobile devices
To reduce font sizes for smaller screens
To reduce padding and margins on tablets and phones
To stack horizontal flex layouts vertically on narrow viewports
To hide decorative elements on mobile
To change element display mode at specific breakpoints

Prerequisites

Page and element must already exist
Element ID must be known (use bricks_get_page_content to find it)
Use bricks_get_breakpoints to verify available breakpoint keys

When NOT to Use

For desktop (base) settings — set those directly with bricks_update_element
For bulk responsive adjustments across many elements — use bricks_auto_responsive
When inline responsive keys are already set during bricks_add_section (e.g., _padding:mobile_portrait in the element JSON)

Parameters

5 Total Parameters4 Required1 Optional

page_idnumberREQUIRED

The WordPress page (post) ID containing the element.

element_idstringREQUIRED

The 6-character Bricks element ID to update with responsive overrides.

breakpointstringREQUIRED

The breakpoint key to apply overrides at.

Values: tablet_landscape, tablet_portrait, mobile_landscape, mobile_portrait

settingsobjectREQUIRED

Settings to apply at this breakpoint. Keys are the same as desktop settings without the breakpoint suffix. The tool adds the suffix automatically.

content_areastringoptional

Content area where the element resides.

Default: content Values: content, header, footer

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

Collapse a 3-column grid on mobile

Override grid columns and reduce padding for tablet and mobile breakpoints on a feature grid element.

JSON

// Tablet: 2 columns, reduced padding
bricks_set_responsive_settings({
  page_id: 42,
  element_id: "abc123",
  breakpoint: "tablet_portrait",
  settings: {
    _gridTemplateColumns: "1fr 1fr",
    _padding: { top: "60", bottom: "60" }
  }
})

// Mobile: single column, minimal padding
bricks_set_responsive_settings({
  page_id: 42,
  element_id: "abc123",
  breakpoint: "mobile_portrait",
  settings: {
    _gridTemplateColumns: "1fr",
    _padding: { top: "40", bottom: "40" },
    _gap: "20"
  }
})

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

Stack flex row and reduce text on mobile

Change a horizontal flex layout to vertical stack and scale down heading typography on mobile.

JSON

// Stack flex items vertically on mobile
bricks_set_responsive_settings({
  page_id: 42,
  element_id: "def456",
  breakpoint: "mobile_landscape",
  settings: {
    _direction: "column",
    _alignItems: "flex-start"
  }
})

// Scale down heading font size
bricks_set_responsive_settings({
  page_id: 42,
  element_id: "ghi789",
  breakpoint: "mobile_portrait",
  settings: {
    _typography: { "font-size": "28px" }
  }
})

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 1939

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

Do NOT pass keys like "_padding:mobile_portrait" — the tool adds the suffix automatically. Just pass "_padding" and specify the breakpoint in the breakpoint parameter.

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 1939

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: "tablet_portrait" and "mobile_portrait", not "tablet-portrait" or "mobile-portrait".

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 1939

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

When collapsing a grid to single column, also reduce the gap and padding. A 30px gap that looks good in 3 columns may be excessive in a single column on mobile.

Tips & Warnings

Common responsive overrides:

_gridTemplateColumns: "1fr" — single column on mobile
_direction: "column" — stack flex items vertically
_padding: { top: "40", bottom: "40" } — reduce padding 40-50%
_display: "none" — hide decorative elements
_typography: { "font-size": "28px" } — scale text down 30-40%

Inline alternative: You can also set responsive overrides directly in bricks_add_section JSON using the key:breakpoint convention, which avoids needing a separate API call.

Return Values

Field	Type	Description
`success`	boolean	Whether the responsive settings were successfully applied.
`message`	string	Confirmation with the element ID, breakpoint, and list of updated setting keys.
`settings`	object	The complete element settings after the responsive overrides were merged, including all breakpoint-suffixed keys.

Related Tools

Technical Details

Tool ID

bricks_set_responsive_settings

API Endpoint

/bricks-mcp/v1/pages/{page_id}/elements/{element_id}/responsive

HTTP Method

PUT

Namespace

pages-elements

Source File

pages/responsive.ts

Version

1.0

Min Bricks Version

1.9

Requires Auth

Yes

Changelog

v1.0

Initial release with automatic breakpoint key suffixing and content area support.

20250101