How to Change the Responsive Breakpoints in Spectra Blocks

Breakpoints are the screen widths where your site stops using the desktop design and switches to the tablet design, and then to the mobile design. Since Spectra Blocks 1.0.7, these widths come from WordPress rather than from Spectra, so changing them is a WordPress setting that Spectra picks up automatically.

This guide shows you the two supported ways to set your own widths, explains the rules WordPress applies to the values, and covers how to bring back the widths used by older Spectra versions if your existing pages were designed around them. If you are new to how responsive editing works in Spectra Blocks, start with Responsive Controls in Spectra Blocks and come back here.

What the Default Breakpoints Are

WordPress defines two values: the widest screen that still counts as mobile, and the widest screen that still counts as tablet. Anything wider than the tablet value is desktop. Spectra Blocks uses the same two values for block styling, Hide on Desktop, Tablet and Mobile, the Slider block, and popups, so everything on the page switches at the same widths.

Here are the values WordPress uses when a theme does not set its own:

Device	Default Width
Desktop	783 px and wider
Tablet	481 px to 782 px
Mobile	Up to 480 px

Some themes declare their own values in their theme.json file. If your theme does, those values are already in effect, and the steps below will override them.

Before You Start

There are a few things to know before you change anything. WordPress applies these rules to whatever values you provide:

• WordPress 7.1 or newer is required. Earlier versions do not have this setting, so the values are ignored, and the defaults above stay in place. Update WordPress first.
• Use px, em or rem. Decimal values such as 767.98px are fine. Percentages and other units are rejected.
• Tablet must be wider than mobile. If the tablet value is equal to or smaller than the mobile value, WordPress drops the tablet value and uses only the mobile one.
• The change applies to every block. The setting belongs to WordPress, so core blocks with responsive styles switch at the new widths too, not only Spectra blocks.

Option 1: Add a Code Snippet

This is the quickest route, and it works with any theme, classic or block based. The snippet tells WordPress to treat your values as if the theme had declared them.

You can add the snippet with a plugin such as Code Snippets, or place it in the functions.php file of your child theme. Here is how to do it:

1. Install and activate a code snippets plugin, or open your child theme’s functions.php file.
2. Add the following code, replacing the two widths with the values you want.
3. Save and activate the snippet.

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) {
    return $theme_json->update_with(
        array(
            'version'  => 3,
            'settings' => array(
                'viewport' => array(
                    'mobile' => '767px',
                    'tablet' => '1023px',
                ),
            ),
        )
    );
} );

The values in this example restore the widths used by Spectra Blocks before version 1.0.7. Change them to anything that fits your design.

Option 2: Use a Child Theme with a theme.json File

If you already run a child theme, or you prefer keeping design settings in files rather than snippets, you can declare the widths in a theme.json file inside the child theme. WordPress reads the child theme’s file first and merges it with the parent theme, so your values win and survive theme updates. This works for block themes and classic themes alike.

Here is how to set it up:

1. Create or open your child theme folder inside wp-content/themes. If you use Astra, you can generate a child theme with the Astra child theme generator.
2. Create a file named theme.json in the child theme folder, or open the existing one.
3. Add the viewport values under settings, as shown below, and save the file.
4. Make sure the child theme is the active theme under Appearance > Themes.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "viewport": {
            "mobile": "767px",
            "tablet": "1023px"
        }
    }
}

If your child theme already has a theme.json file, add only the viewport part inside the existing settings section rather than replacing the whole file.

Restoring the Widths from Older Spectra Versions

Spectra Blocks up to version 1.0.6 treated screens up to 767 px as mobile and screens from 768 px to 1023 px as tablet. If you built pages with those versions, your tablet and mobile designs were tuned to those widths, and after the update, they apply at the narrower WordPress defaults instead.

Both examples above already use 767px and 1023px, which brings your site back to the old switching points. The decimals matter. They keep a 768 px wide screen in the tablet band and a 1024 px wide screen in the desktop band, exactly as before.

How to Check It Worked

Open any page on the front end of your site and slowly narrow your browser window. The tablet design should now appear just below your tablet value and the mobile design just below your mobile value. If nothing changes, clear your site cache and any caching plugin, then reload the page.

The device frames inside the block editor keep their fixed sizes when you switch between Desktop, Tablet, and Mobile in the View menu. The values you set change where the styles switch on the live site, not the size of the preview frames.

Frequently Asked Questions

Do I need to change anything inside Spectra?

No. Spectra reads the widths from WordPress every time it builds its styles, so once WordPress has your values, Spectra follows them.

Can I set different widths for Spectra and for core blocks?

No. WordPress keeps one set of widths for the whole site, which is what keeps Spectra blocks and core blocks switching together.

Wrapping Up

Once the widths are set, every responsive value you add in the editor follows them, and pages built around older Spectra versions look the way you designed them again.

If you are unsure which option fits your setup or the widths do not seem to apply, reach out to our support team, and we will help you sort it out.