Responsive Controls

WordPress 7.1 brought native responsive styling to the block editor — the feature we championed for years. You can now set different styles per device for nearly every block, right in core. With that in place, Ollie Pro retired most of its own per-device controls in favor of the core version, and your existing responsive settings are migrated over automatically — more on that below.

Using Responsive Editing

Responsive styling lives right next to the device preview you already use — the Desktop / Tablet / Mobile switcher in the editor toolbar:

1. Click the device preview button and turn on Responsive editing. The editor tells you you’re now styling a specific screen size.
2. Switch to the Tablet or Mobile viewport. The canvas resizes, and any style change you make applies only to that viewport.
3. Design your desktop styles normally — they’re the base. Tablet and mobile inherit them until you override something.

This works in posts, pages, templates, template parts, and patterns — for individual blocks and for global styles. By default, tablet styles apply at 782px and below and mobile at 480px and below, and theme authors can define custom breakpoints in theme.json.

What You Can Make Responsive

Where Ollie Pro’s old controls covered a curated set of settings, core’s responsive editing covers virtually everything in the styles sidebar: font sizes, colors and backgrounds, padding, margin, block spacing, layout, and more. If you can set it on desktop, you can override it per device — different hero font sizes on mobile, a background color that only appears on tablets, undoing negative margins on small screens, whatever the design calls for.

What Ollie Pro Still Adds

One control has no core equivalent, so Ollie Pro keeps it: Max Width on Paragraph and Heading blocks, found in the Dimensions panel and settable at every device size including desktop. It’s great for keeping line lengths comfortable without wrapping text in a group.

Automatic Migration

If you used Ollie Pro’s responsive controls before, there’s nothing to do — your settings are converted to the core format automatically:

• When you edit a page, any old per-device values on its blocks are converted as the editor loads and saved in the new format the next time you hit Save.
• Pages you never re-edit keep rendering exactly as before through a compatibility layer, so nothing breaks either way.
• The conversion preserves how your site looked, including the old behavior where tablet values also applied to phones. Anything you’ve since set with core’s own controls is never overwritten.

Tips

• Lean on Ollie’s fluid typography and auto-folding layouts first — they handle most screen sizes without any overrides. Reach for responsive editing when you need to dial something in.
• The two highest-impact overrides on almost every site: smaller hero heading font sizes on mobile, and reduced section padding on mobile. Those two alone fix most “looks broken on my phone” complaints.
• Everything outputs as lean CSS on the frontend — no JavaScript measuring your screen.
• Responsive styles are part of WordPress’s AI-ready architecture, so agents building with Ollie AI can set per-device styles too.

For the full story on what shipped in WordPress 7.1, see our complete walkthrough.