Allow developers to customize responsive CSS breakpoints (Tablet/Mobile)

Impact: 80 · Confidence: 95 · Complexity: 65

Description

Problem:
The tablet CSS breakpoint for blocks (like the Section block) is currently hardcoded to 600px. For many modern responsive designs, this value doesn't align with standard tablet widths (e.g., 768px). Since it cannot be modified via UI or a filter, users find their multi-column designs breaking down at widths between 600px and 768px. This lack of flexibility is a significant roadblock for adoption.

Desired Behavior:
Allow users to customize the standard breakpoints (mobile, tablet, desktop) used by Otter Blocks, either via a global UI setting or a PHP filter.

Acceptance Criteria:

• Provide a developer-facing PHP filter (or global dashboard setting) to redefine the responsive CSS breakpoints used by the plugin.
• When overridden, the frontend CSS generation must respect and output the new breakpoint values.
• The block editor interface must also reflect the customized breakpoint dimensions, so the visual editing experience correctly matches the frontend.

Customer Context

The customer is using the Section block with a 2-column layout on tablet. Because the tablet breakpoint starts at 600px instead of a standard 768px, the 2-column layout looks compressed and poorly formatted around the 600px mark. They are officially requesting a way to change this tablet CSS breakpoint (either via settings or a developer filter), noting that this hardcoded limitation prevents them from adopting the plugin.

Root Cause Analysis

The customer needs multi-column layouts to stack or alter properly at standard tablet viewport sizes (e.g., 768px), but the plugin forcibly hardcodes the tablet breakpoint at 600px. Because it cannot be customized via UI or overridden via a PHP filter, layouts fail to degrade gracefully on typical devices, preventing adoption for users and developers who require standard responsive design practices.

Reasoning

The customer wants to change the default tablet CSS breakpoint (600px), which is currently hardcoded in Otter Blocks. They would like to set it to a standard size like 768px to ensure their multi-column layouts look good on standard tablets. I verified that there's no way to adjust these breakpoints in the settings or via documentation, and no existing GitHub issue covers this. Given that responsive design controls are critical for a page builder plugin and the lack of a filter is actively blocking adoption, this should be escalated as a new feature request.

Source: HelpScout #3378874856
Generated by feature-request-triage workflow (ID: feature-request-triage_6a4cea5a5672c3.35597046)

Start by locating the hardcoded 600px breakpoint and the code responsible for frontend CSS generation and block-editor responsive dimensions. Determine how a PHP filter or global setting could provide one shared set of mobile, tablet, and desktop values; done means overridden values are reflected consistently in generated frontend CSS and the editor.