Back to Community
Home / Community / Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Understanding and Customizing Responsive Breakpoints in Kadence Blocks

13 threads Sep 16, 2025 Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Content

Many users of the Gutenberg Blocks with AI by Kadence WP plugin encounter a common challenge: the plugin's default responsive breakpoints don't always align with their design needs or their theme's breakpoint structure. This article explains how Kadence Blocks handles responsive design and provides solutions for working with or customizing these breakpoints.

The Core Issue: Fixed Breakpoints

Kadence Blocks uses predefined CSS media queries to control how blocks appear on different devices. The standard breakpoints are:

  • Tablet: 768px to 1024px (max-width: 1024px and min-width: 768px)
  • Mobile: 767px and below (max-width: 766px)

These fixed values work well for most users but can create problems when:

  • Your theme uses different breakpoints (e.g., 992px for tablet)
  • You need to target specific device widths not covered by the defaults
  • You want to eliminate tablet breakpoints entirely and only use desktop and mobile
  • Padding, margin, or layout changes occur at unexpected screen widths

Official Solutions and Workarounds

1. Using Custom CSS Media Queries

The most straightforward approach is to add custom CSS that targets your specific breakpoints. This method works for overriding specific styling issues without changing the core plugin behavior.

Example: To make a 50% width accordion expand to 100% on mobile devices:

@media (max-width: 767px) {
  .your-accordion-class {
    width: 100% !important;
  }
}

2. Using the Kadence Blocks CSS Filter (Advanced)

For more comprehensive control, Kadence Blocks provides a filter hook: kadence_blocks_css_output_media_queries. This filter allows developers to modify the output media queries programmatically.

Implementation note: This solution requires adding custom PHP code to your theme's functions.php file or a custom plugin. The Kadence Blocks team has indicated that while this filter exists, completely overriding all responsive behavior (particularly for the Row Layout block) is complex because some CSS is output statically rather than dynamically.

3. Understanding Block-Specific Breakpoints

Note that some Kadence Blocks (like the Post Grid/Carousel and Gallery blocks) include five breakpoints instead of three, offering more granular control. Check the documentation for specific blocks to understand their responsive behavior.

Why Customizable Breakpoints Aren't a Standard Feature

Based on community discussions, the Kadence Blocks team has indicated that globally customizable breakpoints are not currently on their development roadmap. This decision appears to be based on:

  • The technical complexity of making all responsive CSS dynamically filterable
  • The need to maintain compatibility across all block types
  • Focusing on improvements that benefit the majority of users

Best Practices for Responsive Design with Kadence Blocks

  1. Test Early and Often: Check your designs at multiple screen sizes during development to identify breakpoint conflicts before they become problems.
  2. Use Consistent Units: When setting padding/margin values for different devices, try to use the same units (px, rem, %) across device contexts to avoid unexpected behavior.
  3. Leverage Additional CSS Classes: The Row Layout block allows adding custom CSS classes, which can be targeted with your own media queries.
  4. Consider Max Width Settings: For container width issues, explore the Row Structure settings which allow setting maximum widths that respond differently on various devices.

While Kadence Blocks doesn't currently offer a graphical interface for customizing breakpoints, these techniques should help you achieve most responsive design goals. The community continues to provide feedback on breakpoint customization, which may influence future development priorities.

Related Support Threads Support