How can I change the responsive breakpoints?

Hi @0711master

I’m glad you reached out. I’d be happy to help.

These filters affect Kadence Blocks CSS output only. They do not automatically change the breakpoints inside the Kadence Block editor preview or the Kadence Theme’s own breakpoint settings. So even if the filter is working correctly on the frontend, you may still see the default breakpoints in the editor or theme settings unless those are adjusted separately.

To help guide you in the right direction, could you share a bit more about your goal?

• Are you trying to change how layouts behave on the frontend at specific screen sizes?
• Or are you trying to adjust the breakpoints inside the editor preview as well?
• Or align everything (theme + blocks + editor) to a custom set of breakpoints?

Once I understand your exact requirement, I can suggest the best approach for your setup.

Looking forward to your reply 

Regards,
Archita

Hi @0711master

Thank you for clarifying, that really helps!

Add the following to your child theme’s functions.php file, replacing the values with Astra’s actual breakpoints:

// Mobile: default max-width 767px
add_filter( 'kadence_mobile_media_query', function( $query ) {
return '(max-width: 600px)';
});

// Tablet: default max-width 1024px
add_filter( 'kadence_tablet_media_query', function( $query ) {
return '(max-width: 900px)';
});

// Desktop: default min-width 1025px
add_filter( 'kadence_desktop_media_query', function( $query ) {
return '(min-width: 901px)';
});

// Mobile Reverse (min-width counterpart to mobile): default min-width 768px
add_filter( 'kadence_mobile_reverse_media_query', function( $query ) {
return '(min-width: 601px)';
});

// Tablet Only: default 768px–1024px
add_filter( 'kadence_tablet_only_media_query', function( $query ) {
return '(min-width: 601px) and (max-width: 900px)';
});

I tried the code on my website and see how it works: https://share.zight.com/d5uqNj5k

I hope this helps. Let me know if we can assist you further.

Best Regards,
Archita

Hi @0711master,

I am so glad to hear that the code snippet worked perfectly for you! It is always a great feeling when everything lines up just right on the frontend.

That is a fantastic suggestion about our documentation. I will absolutely pass your feedback along to our team so we can look into getting this added to our knowledge base. It will definitely be a huge help to other users who are trying to align their Kadence Blocks breakpoints with different themes!

It seems everything is working well now, so I’ll mark this topic as resolved.

Please note that you can also submit a support ticket via these channels.

• FREE Users: https://www.kadencewp.com/help-center/free-support/
• Premium Users: https://www.kadencewp.com/help-center/premium-support/

Thank you for your understanding!

Regards,
Archita

• This reply was modified 3 weeks, 5 days ago by architalevelup.