bricks_auto_responsive
Overview
Automatically analyzes the element structure of a page (or a specific section) and applies sensible responsive overrides based on the chosen strategy. This tool scans for multi-column grids, large font sizes, excessive padding, horizontal flex layouts, and fixed widths, then applies appropriate breakpoint overrides to make the page work well on tablets and mobile devices.
This is the « one-click » responsive solution for Phase 5 polish. It handles the most common responsive patterns automatically, saving significant time compared to manually setting breakpoint overrides on every element with bricks_set_responsive_settings.
Key Features
When to Use
After building page content when you want a quick responsive baseline
When a page has many grid and flex layouts that need mobile overrides
To apply consistent responsive rules across all sections of a page
Page content should be finalized before running auto-responsive
For section-specific targeting, you need the section element ID
When NOT to Use
If the page already has carefully tuned responsive settings that should not be overwritten
For templates (headers/footers) — these should be made responsive manually during Phase 3
Parameters
page_idnumberREQUIREDsection_idstringoptionalstrategystringREQUIREDconservative, aggressiveCode 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
Apply conservative responsive rules to entire page
Run auto-responsive on the whole page during Phase 5 polish to ensure grids collapse, text scales, and padding reduces on mobile devices.
// Apply to entire page
bricks_auto_responsive({
page_id: 42,
strategy: "conservative"
})
// Returns: { success: true, changes: [...], summary: {
// elements_modified: 12,
// overrides_applied: 28,
// by_breakpoint: { tablet_portrait: 10, mobile_portrait: 18 }
// } }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
Target a specific section with aggressive strategy
Apply aggressive responsive adjustments to a complex hero section that has many decorative elements and large font sizes.
bricks_auto_responsive({
page_id: 42,
section_id: "hero01",
strategy: "aggressive"
})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
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
Tips & Warnings
Recommended workflow: Build the full page content first, then run bricks_auto_responsive({ strategy: "conservative" }) once as a Phase 5 polish step. Review the change report and use bricks_set_responsive_settings for any fine-tuning needed.
Conservative vs aggressive: Start with conservative. It covers the most impactful changes (grid collapse, font scaling, padding reduction) without any surprises. Only use aggressive if the page has many decorative elements that should be hidden on mobile.