Device-Specific Settings Not Applied – ZenBlocks buttonBasic

Device-Specific Settings Not Applied – ZenBlocks buttonBasic

Summary

When device-specific settings are not applied, the cause is one of the following: **stale CSS Cache, Breakpoint value mismatch, or conflict with theme CSS**. CSS Cache clearing is especially necessary immediately after changing Breakpoint values.

—

Cause

  • **Stale CSS Cache**: Responsive CSS is generated as cache, so if the cache is not updated after settings changes, old values will be applied
  • **CSS not regenerated after Breakpoint change**: After changing Breakpoint values, CSS files need to be regenerated
  • **CSS specificity conflict with theme**: If the theme's CSS selectors have higher specificity than ZenBlocks' responsive CSS, theme values take priority
  • **Checking in the editor preview**: The editor's responsive preview works by resizing an iframe, which can produce differences from the actual frontend
  • **No value set for a specific device**: When a specific device value is empty, the PC (default) value is used as a fallback

Solution Steps

  1. Open the **actual frontend page**, not the editor preview
  2. Open browser developer tools (F12)
  3. Switch to responsive mode (device toolbar) and set the target screen width
  4. Check the button's computed styles to verify the intended values are applied
  5. Check ZenBlocks' CSS Cache directory at `/wp-content/uploads/zenblocks/`
  6. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)
  7. If using a CDN, purge the CDN cache as well
  8. If using a server-side cache plugin (WP Super Cache, W3 Total Cache, etc.), clear that cache too
  9. Check Breakpoint values in the editor sidebar (global settings)
  10. ZenBlocks uses the following default Breakpoint values:
  11. **MD (Tablet)**: 1024px
  12. **TB (Small tablet)**: 768px
  13. **SP (Smartphone)**: 480px
  14. Check consistency with your theme's breakpoints
  15. After changing Breakpoint values, verify that responsive CSS files are automatically regenerated
  16. Use browser developer tools to inspect the target button's CSS
  17. Check if ZenBlocks styles are shown with a strikethrough (overridden)
  18. If theme CSS takes priority, ZenBlocks settings are being overwritten
  19. Theme-side CSS adjustments may be necessary
  20. Switch device previews in the editor and check values in each settings panel
  21. Items left blank (unset) for tablet or smartphone will fall back to PC values
  22. If you want different values for specific devices, enter them explicitly
  23. Responsive-related issues are often caused by CSS selector specificity mismatches between SCSS base styles and PHP dynamic CSS.
  24. The editor's responsive preview is implemented by resizing an iframe. There may be slight differences due to theme CSS influence, so always verify on the actual frontend for accurate results.
  25. Changing Breakpoint values affects the responsive behavior of the entire site. Make changes carefully.

Related Settings

関連設定

– [表示設定](../display/) – デバイス別の表示/非表示制御
– [フォント設定](../font/) – デバイス別のフォントサイズ
– [レイアウト設定](../layout/) – デバイス別の余白・サイズ

Related FAQ