Elementor Pro and Astra have different breakpoints - how to salvage?

Question

So I read all this hype about Astra being the best theme for Elementor for non-theme-developers. I am not a theme developer. TBH, I don't use WP as my preferred platform, but obviously if client requirements dictate, I abide. In my estimation, Elementor was the best fit for this client... and I thought Astra was the best starter theme. Current propaganda says they work together famously - not so much. they have different breakpoints! And while I can adjust Elementor's breakpoints to match Astra's, for this use case, Elementor's are way more appropriate. I know i can override ALL of Astra's breakpoints in the CSS but that doesn't do my client any good should they try to use any of Astra's customizer features in combination with Elementor after I'm gone.

Long story short, I picked a bad pair.

Unless I'm mistaken, there's no way to build Astra with these matching break points. Again, I know i can do it all through through CSS but if that is what is required, I should start with a more bare-bones theme. maybe tat's what I need.

Anyway, I know this question probably sounds mostly subjective, but What I'm really asking is:

Is there a way I'm missing to match Astra's (or any other theme for that matter) breakpoints to that of the page builder I'm using (in this case, Elementor)?

Answer 1

In my case, it was the fact that the theme displayed the mobile header/navigation at 921px whereas my page builder was configured to do so at 1024px. And although I had full control over the page/theme builder's breakpoints< for this particular case, I wanted to keep it at 1024px.

Luckily the theme was developed with a filter that returns the breakpoint for the header, so that these such adjustments can be made. It was quite simple:

/**
 * Change the breakpoint of the Astra Header Menus
 * 
 * @return int Screen width when the header should change to the mobile header.
 */
function bene_change_header_breakpoint() {
 return 1024;
};

add_filter( 'astra_header_break_point', 'bene_change_header_breakpoint' );

Now everything that needs to match, breakpoint-wise, does in fact match - crisis averted.

My official answer is that if this theme had such filters, there's probably a good chance others do as well. So if you are faced with this type of issue, check the theme's documentation for filters like this.

Source: https://wpastra.com/docs/change-astra-header-breakpoint-width/