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)?

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)?

• theme-development
• responsive

• minus 1 without a comment - how novel. I don't think I violated any posting guidelines. I'm obviously new here - please elaborate? Did I express my opinion on the astra//elementor union too boldly? I"m happy to reword but cannot do so without additional feedback. – Daveh0 Commented Feb 20, 2020 at 3:39
• 1 Why do the breakpoints need to match? – Jacob Peattie Commented Feb 20, 2020 at 4:59
• Also, this question is off-topic. Questions about 3rd-party themes and plugins and theme/plugin recommendations are both off-topic here. – Jacob Peattie Commented Feb 20, 2020 at 4:59
• Have you tried reaching out to Astra about this? – kero Commented Feb 20, 2020 at 9:31
• 1 @Daveh0 You can self answer the question if you found the solution (and are encouraged to). About the "WP comes armed with breakpoints": Nope. It is not the job of the system, but of the themes. In a perfect world, all relevant styles should come from the theme and plugins only bring functionality. – kero Commented Feb 21, 2020 at 9:30

1 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/docs/change-astra-header-breakpoint-width/