How To Use Responsive Block Styles In WordPress 7.1: Mobile, Tablet And Hover Without Custom CSS

On September 30, 2026, I built a simple bakery hero section on a WordPress 7.1 test site: a dark background, a 56 pixel headline, a line of copy, and two buttons. On a laptop it looked right. In the editor’s mobile preview the headline broke into four lines and pushed both buttons below the visible screen. A year ago, fixing that meant a custom CSS media query or a block plugin. This time I fixed it inside the editor, without writing a line of CSS.

WordPress 7.1 “Mary Lou”, released on August 19, 2026, added responsive block styles to core. You can now give any block that uses core style controls a different font size, padding, color or border on tablet and mobile, and style buttons for hover, focus and active states. This guide walks through each step with screenshots from my test site, shows what WordPress saves behind the scenes, and is honest about where the feature stops.

What Responsive Block Styles Actually Are

The official developer note on make.wordpress.org describes it as responsive style states for blocks. Styles can be defined for Tablet and Mobile viewports in two places: in Global Styles for a whole block type, and on individual blocks. They work with every block that uses core block supports, which covers typography, color, background, border, dimensions, spacing and layout.

The model is simple. Your normal style is the base style and applies at every screen size. A Tablet or Mobile style overrides that base only inside its own screen range. There is no separate Desktop value, because the default style already is the desktop style.

Viewport	Default media query	Style key saved
Mobile	width 480px and below	@mobile
Tablet	above 480px up to 782px	@tablet
Desktop	No query, this is the base style	None

The WordPress 7.1 release page puts it in one line: set how a block looks at different screen sizes directly in the editor, for both Global Styles and individual blocks, without writing custom CSS. The same page lists interactive styles as a separate feature: hover, focus and active states for the Button and Navigation Link blocks.

What You Need Before You Start

• WordPress 7.1 or later. My test site runs 7.1 with Nexter Theme, and the WordPress 7.1 overview covers the rest of the release.
• Blocks that use core style controls: Group, Heading, Paragraph, Buttons, Image, Columns and the other core blocks. Third-party blocks only join in if their developer adds support.
• A few minutes to plan which values actually need to change. In my hero, only two did: the headline size and the section padding.

How To Turn On Responsive Styles In The Editor

Responsive editing lives in the View menu, the monitor icon next to Save draft in the top toolbar. Open it and you will see three preview options, Desktop, Tablet and Mobile, plus a new toggle called Responsive styles with the hint “Style changes apply only to the selected viewport”.

1. Open the page or template in the block editor.
2. Click the View menu in the top toolbar.
3. Turn on Responsive styles.
4. Open the View menu again and choose Tablet or Mobile. The canvas shrinks to that width.

The order matters. If you switch to Mobile without turning on Responsive styles, you only get a preview, and any change you make still edits the base style for every screen. With the toggle on, the block sidebar shows a small Mobile or Tablet badge under the block name so you always know which layer you are editing.

How To Set A Smaller Heading On Mobile

With Responsive styles on and the Mobile viewport selected, click the heading and open the Styles tab in the block sidebar. The Mobile badge appears under the block description. Set the font size you want for phones. In my case the base size stays at 56px and the mobile size drops to 34px.

Switch back to Desktop and the headline returns to 56px. Nothing about the base style changed. That separation is the whole point: you are adding an override, not replacing your design.

How To Change Padding And Spacing For Tablet And Mobile

Section padding is usually the second thing that breaks on phones. A generous 96px top and bottom padding with 64px on the sides looks calm on a desktop and wastes a third of a phone screen. Select the Group block that wraps the section, stay on the Mobile viewport, open Styles and scroll to Dimensions.

I set 48px top and bottom and 24px left and right. Margin and block spacing sit in the same panel and work the same way. Repeat on the Tablet viewport if tablets need a middle value; if you skip Tablet, tablets simply use the base style.

How To Style Hover, Focus And Active States

Interactive styles are separate from viewports. Select a Button block and look at the top of the block sidebar for a control labeled State: Default. Click it and a Pseudo state menu opens with five options: Default, Hover, Focus, Focus-visible and Active.

1. Select the button.
2. Open State: Default and choose Hover.
3. Turn on Show state on canvas if you want to see the result while you edit.
4. Open the Styles tab and set the hover background and text color. I used a darker purple, #5b2fd6, against the base #8a5cff.
5. Repeat for Focus or Focus-visible so keyboard users get a visible state too.

According to the release page, these interactive states cover the Button and Navigation Link blocks in 7.1. States can also be combined with viewports, so a button can have a different hover color on mobile, although in practice I would keep hover styles the same on every screen.

What WordPress Saves Behind The Scenes

Open the Code editor from the Options menu and you can see exactly what was stored. The responsive values live inside the block’s existing style attribute, under @mobile and @tablet keys, and the hover values sit under a :hover key.

<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"56px"},"@mobile":{"typography":{"fontSize":"34px"}}}} -->

On the front end, WordPress generates media query CSS and adds a generated class to the block. In the page source of my test page, the heading got this rule:

@media (width <= 480px){.wp-states-935f404b{font-size:34px !important;}

The !important is intentional. The developer note explains that per-block state declarations are marked important so they can override the block’s default inline styles. It is worth knowing if you also have your own CSS targeting the same element, because a responsive value set in the editor will win.

Check The Result On The Front End

Always check the live page, not only the editor preview. I loaded the published test page at 1440 pixels and at 390 pixels wide.

The phone version now shows the headline on three lines, the copy, and both buttons without the extra padding. The desktop version is unchanged. No plugin, no custom CSS file, and no second copy of the section hidden per device.

Setting Site-Wide Rules In theme.json And Global Styles

Per-block overrides are fine for one hero. For a whole site, set the rule once. In Global Styles, open a block type, then use the States dropdown and its Viewport group to define tablet and mobile styles for every block of that type. Theme developers can do the same in theme.json with the same keys. This example from the developer note shrinks Group padding on phones:

"styles": {
  "blocks": {
    "core/group": {
      "spacing": { "padding": { "top": "3rem", "right": "3rem", "bottom": "3rem", "left": "3rem" } },
      "@mobile": {
        "spacing": { "padding": { "top": "1rem", "right": "1rem", "bottom": "1rem", "left": "1rem" } }
      }
    }
  }
}

Themes can also move the breakpoints with the new top-level settings.viewport value. Only px, em and rem are accepted:

"settings": {
  "viewport": { "mobile": "30rem", "tablet": "45rem" }
}

If you manage colors and typography in the Customizer instead, our guide to Nexter Theme global styles shows how the theme’s own settings sit alongside these block rules, and the WordPress Site Editor guide covers where Global Styles lives in a block theme.

How To Turn Responsive Editing Off For Clients

On client sites, fewer knobs can be a feature. WordPress 7.1 adds a responsiveEditingEnabled editor setting that defaults to true. Setting it to false removes the Responsive styles toggle from the View menu and the Viewport group from the Global Styles States dropdown:

function example_disable_responsive_editing( $settings ) {
	$settings['responsiveEditingEnabled'] = false;
	return $settings;
}
add_filter( 'block_editor_settings_all', 'example_disable_responsive_editing' );

Device previews and the hover state still work, and existing responsive styles keep rendering on the front end, because the setting only changes the editing interface. You can add a snippet like this without editing functions.php by using the Nexter Extension code snippets manager.

Four Mistakes To Avoid

I made two of these on my own test page before the screenshots above were right, so they are worth a minute:

• Editing Mobile without the toggle on. If the block sidebar does not show a Mobile or Tablet badge, you are changing the base style for every screen. Check for the badge before you touch a value.
• Overriding everything. Every override is one more value to maintain. Change only what actually breaks at that width, which on most sections is font size, padding and gap.
• Forgetting the tablet range. The default Tablet range stops at 782 pixels, so a 1024 pixel tablet in landscape uses your desktop style. Test at 800 to 1024 pixels as well as on a phone.
• Fighting your own CSS. Because per-block responsive values are output as important, an old custom CSS rule for the same element will lose. Remove the old media query instead of adding a stronger one.

One habit helps with all four: after each change, switch the View menu back to Desktop and confirm the desktop design did not move.

Where Core Responsive Styles Stop

This is a big step, and it is still a first version. From the developer note, the 7.1 release page and the Gutenberg issue tracker, these are the limits I would plan around today:

• Two breakpoints only. You get Mobile and Tablet overrides on top of the base style. There is no third custom breakpoint and no per-block breakpoint value, because settings.viewport is site-wide.
• Core style controls only. Anything outside typography, color, background, border, dimensions, spacing and layout is not covered. Showing or hiding a block per device is handled by the separate block visibility feature, which uses the same viewport widths.
• Some block settings are still catching up. The Gallery block’s column count and image crop only gained viewport support in the Gutenberg 24.0 plugin release on September 16, 2026, so they are not in WordPress 7.1 core yet.
• Third-party controls can disappear in responsive mode. Gutenberg issue #82633 documents that custom toolbar controls from other plugins are hidden while you edit a viewport state, and the public API for plugins is part of the WordPress 7.2 work.
• Interactive states are limited to Button and Navigation Link in 7.1.

None of this is a reason to wait. For most content sites, core now handles the everyday mobile fixes. If you want to know what is coming next, our WordPress 7.2 roadmap tracks the release, which is planned for December 2026.

Where Nexter Blocks Still Fits

I would now start every mobile fix with core styles. Where I still reach for Nexter Blocks is for layouts core does not ship as blocks, such as pricing tables, tabbed sections, flip boxes, forms and post listings, and for finer typography control. Nexter Blocks has its own per-device controls inside each block, so its font size, line height and letter spacing each get their own device switch.

The two approaches work side by side on the same page. Core blocks use the new @mobile and @tablet styles, and Nexter blocks keep their own device settings. If you are deciding whether you need a block plugin at all after 7.1, I compared the options in Do You Still Need A Gutenberg Blocks Plugin?

What This Doesn’t Cover

I tested this on one WordPress 7.1 site running Nexter Theme, using a single hero section, on September 30, 2026. I did not test every core block, every theme, or the Gutenberg plugin’s newer builds beyond reading the Gutenberg 24.0 release notes. I also did not measure the performance cost of the generated CSS on large pages. Block themes that ship their own responsive rules in theme.json may already set some of these values for you, so check your theme’s documentation before you add overrides by hand.

Suggested Reading

• WordPress 7.1: What’s New and What Got Deferred
• WordPress 7.1 Adds Tabs, but Not a Table of Contents. Do You Still Need a Blocks Plugin?
• WordPress 7.2: Release Date, Ipsum Theme, And Every Feature On The Roadmap
• What Is a WordPress Block Theme? The 2026 Build-and-Choose Guide