On This Page
Documentation
Extended Responsive Controls: DOCUMENTATION
Responsive Controls adds tablet and mobile settings to core WordPress blocks. Desktop always uses the block’s normal settings. The plugin’s controls override them at tablet and mobile sizes, plus a few desktop-only extras such as Hide on Desktop and desktop sticky offsets. Every feature is free.
Text Alignment
Sets the text alignment of a block at tablet and mobile sizes. Desktop alignment uses the block’s own alignment control.
| Option | What it does |
|---|---|
| No Change | Keeps the block’s normal alignment |
| Left | text-align: left |
| Center | text-align: center |
| Right | text-align: right |
| Justify | text-align: justify |
Note: On a Buttons block, alignment also moves the buttons themselves (left, center, right), not just the text inside them.
Full Width (Flex Fix)
Sets width: 100% on the block at that breakpoint.
When to use it: if a block sits inside a flex container (a Row, Stack, or Buttons layout), it may only be as wide as its content, so text alignment appears to do nothing. Turning on Full Width gives the text room to align.
Visibility
Hides a block at a specific screen size.
| Toggle | Breakpoint | CSS class applied |
|---|---|---|
| Hide on Desktop | ≥ 1025px | cw-desktop-hide |
| Hide on Tablet | 741px – 1024px | cw-tablet-hide |
| Hide on Mobile | ≤ 740px | cw-mobile-hide |
Toggles can be combined. For example, hide on Desktop and Tablet to show a block only on mobile.
Note: Hidden blocks are still in the page’s HTML; they’re hidden with display: none at that size.
Typography Controls
Separate Tablet Typography and Mobile Typography panels appear inside the block’s Typography panel, below the native (desktop) controls. Font size shows by default; add the others from the panel’s ⋮ menu.
| Control | CSS property |
|---|---|
| Font family | font-family — families registered by your theme and the Font Library |
| Font size | font-size — theme presets or a custom value |
| Appearance | font-style and font-weight |
| Line height | line-height |
| Letter spacing | letter-spacing |
| Decoration | text-decoration (underline, line-through, overline) |
| Letter case | text-transform (uppercase, lowercase, capitalize) |
Note: On a Buttons block, typography also applies to the button text.
Tip: Use Reset all in a panel’s ⋮ menu to clear every value for that device at once.
Padding & Margin
Separate Tablet Dimensions and Mobile Dimensions panels appear inside the block’s Dimensions panel. Padding shows by default; add Margin and Block Spacing from the ⋮ menu.
| Control | Sides | Notes |
|---|---|---|
| Padding | Top, right, bottom, left | Theme spacing presets or custom values |
| Margin | Top, bottom | Negative values allowed |
Note: Margin is top and bottom only, matching WordPress’s own margin control. Left and right margins would interfere with how WordPress centers and aligns blocks.
Block Spacing
Sets the space between a block’s inner blocks at tablet and mobile sizes. Found in the Tablet and Mobile Dimensions panels.
Available on: Group, Columns, Column, Buttons.
| Block layout | How spacing is applied |
|---|---|
| Row, Stack, Grid, Columns, Buttons | gap |
| Group (default / constrained) | Top margin between inner blocks |
Group Layout
Available on Group blocks using the Row or Stack layout, under each breakpoint in the Responsive Controls panel.
| Control | Options |
|---|---|
| Direction | No Change, Row, Stack |
| Justification | Row: Left, Center, Right, Space Between. Stack: Left, Center, Right, Stretch |
| Wrap | No Change, Wrap, No Wrap |
Example: a Row with an image and text side by side on desktop can become a Stack on mobile, with the items centered.
Note: When you switch direction, the block’s own justification carries over unless you set one for that device.
Columns Stacking
Available on Columns blocks, under each breakpoint in the Responsive Controls panel.
| Control | Breakpoint | What it does |
|---|---|---|
| Stack on Tablet | Tablet | Stacks the columns vertically, each full width |
| Reverse Order When Stacked | Tablet | Shows the last column first. Appears once Stack on Tablet is on |
| Reverse Order When Stacked | Mobile | Shows the last column first. Appears when the block’s native Stack on mobile setting is on |
Note: WordPress stacks columns at 781px and below when “Stack on mobile” is on. Between 741px and 781px, columns are already stacked by WordPress, and the tablet reverse setting applies from 782px up.
Order
Moves a block earlier or later within its parent at tablet and mobile sizes, without changing the content order.
Shown when the block’s parent is: Columns, Buttons, or a Group using Row, Stack, or Grid layout. Columns can be reordered individually.
| Value | Result |
|---|---|
| Lower numbers | Appear first |
| 0 | Default position |
| Negative numbers | Move ahead of everything at 0 |
Sticky Offsets
Appears in the Styles tab when the block’s Position is set to Sticky. WordPress offers sticky positioning on blocks such as Group.
Each breakpoint (Desktop, Tablet, Mobile) has:
| Control | What it does |
|---|---|
| Top / Bottom toggle | Which edge the vertical offset is measured from |
| Vertical offset | Distance from that edge (px, %, em, rem, vh, vw) |
| Left / Right toggle | Which edge the horizontal offset is measured from |
| Horizontal offset | Distance from that edge |
Note: Use a top offset equal to your header’s height so a sticky sidebar doesn’t slide under the header.
Breakpoints
Three screen sizes, each with its own settings. Desktop keeps your block’s normal design, while tablet and mobile each get their own adjustments.
Each range is independent: a tablet setting does not carry down to mobile.
| Device | Screen width |
|---|---|
| Desktop | 1025px and up |
| Tablet | 741px – 1024px |
| Mobile | 740px and below |
Requirements
| Requirement | Minimum | Notes |
|---|---|---|
| WordPress | 6.5+ | Block editor required |
| PHP | 7.4+ | 8.x recommended |
| Theme | Any | Block themes, or classic themes using the block editor |
| Page builder | Not required | Works in the native block editor |
Supported blocks: Group (including Row, Stack, Grid), Columns, Column, Paragraph, Heading, Buttons.
Installation
Install the free version from WordPress.org
In your WordPress admin, go to Plugins → Add New Plugin.
Search for Codify: Responsive Controls.
Click Install Now, then Activate.
You’ll be taken to Settings → Codify: Responsive Controls. You’ll be asked whether you want to share basic, non-sensitive usage data to help improve the plugin. Choose Allow & Continue or Skip. The plugin works the same either way.
Install from a zip file
Go to Plugins → Add New Plugin → Upload Plugin.
Choose the plugin .zip file and click Install Now.
Click Activate Plugin.
Install manually (FTP)
Unzip the plugin file.
Upload the codify-responsive-controls folder to /wp-content/plugins/ on your server.
Go to Plugins in your WordPress admin and click Activate under Codify: Responsive Controls.
Plugin Settings Page
| Tab | What it’s for |
|---|---|
| Overview | Your version, quick-start steps, and links to the product page, documentation, FAQ, and support. |
| Account | Appears after you opt in. |
| Contact Us | Send us a message directly from your WordPress admin. |
Note: All styling controls live in the block editor, not on this page. Select a Navigation block and open the Styles tab in the block sidebar.
Plugins Screen Links
Under the plugin name on the Plugins screen, you’ll find a quick link to Info, which opens the plugin’s settings page.
Finding the Controls
All styling controls live in the block editor sidebar under the Styles tab. A Settings → Codify: Extended Navigation Block page has an overview and links to the docs, FAQ and support.
Open a page or post (or a template in Appearance → Editor).
Select a supported block — Group, Columns, Column, Paragraph, Heading, or Buttons.
Settings tab → Responsive Controls — Alignment, full width, visibility, Group layout, Columns stacking, and Order for each breakpoint.
Styles tab → Typography / Dimensions — Tablet and Mobile panels sit inside these native panels, below the desktop controls. Sticky Offsets appears here when Position is set to Sticky.
Tip: If the sidebar isn’t showing, click the Settings icon (top right of the editor) to open it.
Troubleshooting
My tablet/mobile settings don’t show in the editor
That’s expected. Responsive settings are applied on the live site, not in the editor canvas. Check the frontend and resize your browser, or use your browser’s device mode in developer tools.
Text alignment does nothing
The block is probably inside a flex container (Row, Stack, or Buttons) and is only as wide as its text. Turn on Full Width (Flex Fix) for that breakpoint.
The Order or Group Layout controls are missing
Order only appears when the block’s parent is Columns, Buttons, or a Row/Stack/Grid group. Direction, Justification, and Wrap only appear on Groups using the Row or Stack layout.
I don’t see Sticky Offsets
Set the block’s Position to Sticky first (Styles tab → Position). The Sticky Offsets panel appears once sticky is on.
Changes aren’t showing on the live site
Clear any page caching or CDN cache, then reload.
Changelog
v1.0.0 — Initial Release
- Responsive text alignment for tablet and mobile
- Hide on desktop, tablet, and mobile
- Full width (flex fix) for tablet and mobile
- Tablet and mobile typography: font family, size, appearance, line height, letter spacing, decoration, letter case
- Tablet and mobile padding, margin, and block spacing with theme spacing presets
- Group direction, justification, and wrap per breakpoint
- Columns: stack on tablet and reverse order when stacked
- Responsive order for blocks inside flex and grid containers
- Sticky offsets for desktop, tablet, and mobile
- Supports Group, Columns, Column, Paragraph, Heading, and Buttons
- Translation ready