Download

Responsive Controls Extension

Written by

in

Overview

The Responsive Controls Extension adds powerful responsive design capabilities to any WordPress block. Control visibility, sizing, spacing, and layout options for different screen sizes (desktop, tablet, mobile) directly in the block editor, without writing custom CSS.

Key Features

  • Device-Specific Settings: Control block behavior per device (desktop, tablet, mobile)
  • Visibility Controls: Show/hide blocks on specific devices
  • Responsive Spacing: Different padding and margins per breakpoint
  • Font Size Control: Adjust typography for each screen size
  • Alignment Options: Change text/block alignment per device
  • Visual Breakpoint Switcher: Preview and edit responsive settings in editor
  • Works with Any Block: Enhances all WordPress blocks

How to Use

  1. Select any block in the editor
  2. Look for the Responsive tab in block settings
  3. Use the device switcher (Desktop/Tablet/Mobile)
  4. Adjust settings specific to each device
  5. Preview changes using the breakpoint selector
  6. Test on actual devices to verify behavior

Available Controls

Visibility Settings

  • Hide on Desktop: Hide block on screens wider than 1024px
  • Hide on Tablet: Hide block on screens 768px – 1024px
  • Hide on Mobile: Hide block on screens under 768px

Spacing Controls

  • Responsive Padding: Different padding values per breakpoint
  • Responsive Margin: Different margin values per breakpoint
  • Gap Control: Adjust spacing in flex/grid layouts per device

Typography Controls

  • Font Size: Adjust text size for each device
  • Line Height: Control line spacing per breakpoint
  • Letter Spacing: Fine-tune character spacing

Layout Controls

  • Alignment: Change text/block alignment per device
  • Width: Different block widths for each breakpoint
  • Flex Direction: Switch between row/column layouts

Common Use Cases

  • Mobile Navigation: Show hamburger menu on mobile, full menu on desktop
  • Hero Sections: Larger text on desktop, smaller on mobile
  • Image Galleries: More columns on desktop, fewer on mobile
  • Sidebars: Full-width on mobile, sidebar layout on desktop
  • CTAs: Stack buttons vertically on mobile, horizontally on desktop
  • Content Sections: Adjust spacing and layout per device

Best Practices

  • Start with mobile design, then enhance for larger screens (mobile-first)
  • Test on actual devices, not just browser resize
  • Use visibility controls sparingly – content should adapt, not hide
  • Maintain consistent spacing ratios across breakpoints
  • Ensure important content is visible on all devices
  • Use theme breakpoints when possible for consistency
  • Preview all breakpoints before publishing

Breakpoints

  • Mobile: 0 – 767px
  • Tablet: 768px – 1023px
  • Desktop: 1024px and above

Troubleshooting

  • Settings not applying: Clear cache, check CSS specificity conflicts
  • Block not hiding: Verify breakpoint values, check for !important CSS overrides
  • Inconsistent spacing: Ensure units are consistent (px, em, rem)
  • Preview not accurate: Test on actual devices for final verification

More posts