Match Elementor and Astra Styles and Breakpoints

Update 8/3/2021 – Here is the current information:

-Astra Breakpoints (version 3.6.7):
max-width: 599px
min-width: 600px and max-width: 781px
min-width: 782px
max-width: 992px
max-width: 1120px
above 1120px

-Elementor breakpoints (version 3.3.1):
below 768px mobile
768px to below 1025px tablet
1025px and above desktop

So I tried this and it looked good to me. In the Elementor Editor, Site Settings, Layout, Breakpoints, I entered:
782px mobile
1120px tablet

Note: things are changing. Elementor is working on giving users more breakpoint control.

Update 3-15-2021: In Astra 2.4 they added PHP filters so you can adjust the breakpoints. See this help document on the new feature.

Update 1-9-2019: Unfortunately, Astra support provided incorrect information and the Astra mobile break point originally reported was incorrect. Thanks to David Tierney who noticed the discrepancy in the source code and let me know. I’ve confirmed with the Astra team and updated this post.

By default Elementor has breakpoints set at 1024 pixels for tablet and 768 pixels for mobile.  Astra has defaults of 768 pixels for tablet and 544 pixels for mobile.  What could go wrong?  

In this tutorial I want to look at styles and breakpoints. Elementor and Astra have different defaults. I’ll show an example of why it matters and how to match them for more design control and a more consistent viewing experience.

I’ve used the Astra Pro theme on a number of projects.  Astra has a ton of customization options. It is fast and flexible. Note that although I’m using Astra Pro in this tutorial, the same principles apply no matter which theme you are pairing with Elementor.

Video Version

Elementor’s Default Settings

Colors, Fonts, and Content Width

First, let’s look at what the Elementor default options are. In the General tab I see the post types listed, along with the option to disable default Elementor colors and fonts.

It is a good idea to disable these defaults. Why? Let’s take a look at a post using the Astra defaults and one using the Elementor defaults:

Astra is using the Segoe UI font for the title and text. Elementor is using Roboto for the title and Segoe UI for the text. Also, glaringly, Elementor defaults to that light blue title color. We don’t want our site styles jumping back and forth. I’m going to check the “Disable default colors” and “Disable default fonts” in the Elementor General settings tab and we’ll compare again.

That fixed the heading font and color issue. There is still a spacing difference between text sections. Looking at the Style settings tab there are two other settings to change to get a match:

In the Astra Customizer we see that default content width is 1200 pixels, but Elementor is using the default of 1140 pixels. Also, by default Elementor adds 20 pixels between widgets. I changed the Elementor Content Width to 1200 pixels. To remove the extra space between paragraphs, you could set the Space Between Widgets to 0, but that may involve manually adding padding in a lot of cases. Unfortunately there is not a quick fix to synchronize these.

Breakpoints

CSS, or media query breakpoints, are settings that are meant to roughly correspond to different viewing device sizes. A mobile phone has a smaller screen than a tablet, which has a smaller screen than a desktop computer. Breakpoints are used so that you can layout and size page elements based on different screen sizes.

Example Of The Mismatch Breakpoints Problem

I created an archive template for a Books Customer Post Type. Since the desktop view has a lot of space, I set it to have two columns of books and a sidebar. On a tablet, I want it to have one column and a sidebar, and on mobile just one column and no sidebar.

Here is the desktop Archive Posts layout in the Elementor editor. Note the little screen icon in the settings panel that I highlighted with an orange square. I’ll use that to adjust the layout for the different device sizes.

Since I know I don’t want the sidebar on mobile, I’ll go ahead and hide that by right clicking on the sidebar control and then in the Advanced, Responsive settings, toggle on “Hide On Mobile.”

Back in the Archive Posts layout editor, I click on the little device button to show other device size settings. I select Tablet, set the number of columns to 1 and do the same for the mobile size.

I save it and go view it in the Customizer. What the heck!??? For the tablet view there is no sidebar at all, not even stacked under the book excerpts. Also, the featured image is huge.

Coordinating The Breakpoint Settings.

When testing this, I resized the browser window and noticed that the settings I thought I was making in the Elementor editor for the different device layouts wasn’t breaking in the usual places. I checked the Astra knowledge base and nowhere do they list the breakpoints, so I asked support. They told me that Astra uses the default WordPress breakpoints of 768 pixels for tablet and 480 pixels for mobile. Astra uses a breakpoint of 768 pixels for tablet and 544 pixels for mobile.

There is a big difference between the Astra and Elementor defaults. I reached out to Elementor support asking about the Elementor breakpoints, which are 1024 pixels for tablet and 768 pixels for mobile. They said they set them that way to take into account high definition tablets, such as the newer iPads. They acknowledged that it might make sense in some cases to match the breakpoints with the theme.

So I changed the Elementor breakpoints to match Astra’s. Note that the numbers are 1 pixel more than the actual breakpoint because it says “Below this breakpoint…”

Back in the Customizer and the layout has been fixed to work as designed.

Conclusion

Both Elementor and Astra only support three device sizes. Elementor decided to pay attention to hi-res tablets while Astra followed the WordPress defaults. If more device sizes were supported this mismatch may not have occurred. As it is, the site builder needs to decide which to support. I went with the Astra settings because they seemed more commonplace.

In this tutorial I’ve shown why it makes sense to coordinate Elementor’s settings with the theme’s defaults. I used Astra as the example, but the same idea holds true for other themes as well. By matching the two sets of settings we can get a more consistent layout that matches the design intentions. I hope you found this tutorial useful.