match elementor and astra settings

Match Elementor and Astra Styles and Breakpoints

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on email

Table of Contents

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.

elementor default general settings

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:

style comparison

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.

Second style comparison now using the themes colors and fonts

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:

elementor default style settings

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.

astra default content width


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.

desktop design

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.”

hide sidebar 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.

mobile archive layout

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.

tablet view in the customizer

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…”

Astra Elementor Breakpoints

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

layout fixed to work as designed


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.

Filed under:

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

  • Super useful info on breakpoints, tnx a lot. Question: In the video, what tool are you using to show the fonts in use in that little floating window? Seems very handy!

  • Hi Dave, I’d like to do the reverse: Change Astra Pro’s breakpoints to match elementors. Could you please tell me how to do this?

    /* Astra: 768px tablet, 480px mobile
    * Elementor: 1024px tablet, 768px mobile

  • Inputting these settings seems to break elementor’s responsive preview? Tablet preview becomes 481px and mobile 360px?

    • I took a look and the tablet preview seems to be the lowest point just before breaking to mobile, and the mobile somewhere below the mobile break point, whether using the Elementor defaults or the Astra ones. So I don’t think it is broken, though it looks odd because we are used to the tablet one being bigger.

      Using the Astra theme I tested with a three column layout in Elementor and set each column at 33% desktop, 50% tablet, and 100% mobile. This layout was reflected when using the responsive mode toggle in the Elementor editor. Using Chrome dev tools, responsive device settings, when the page width was 769px or greater all three columns were on the same row. When below 769px and greater than 480px there were 2 columns per row (1st row with 2 and 2nd row with 1 at 50%). At 480px and below only 1 column per row was shown.

      Many people think there we should use 5 breakpoints / previews instead of 3, to account for mobile and tablet landscape views.

  • Astra breakpoints for mobile are actually 544 pixels. I noticed it in the code and asked them if they changed them, based on your article, and they responded, “The breakpoint for mobile has always been 544px. It never was 480px.” This was after the first person thought it was 480 and I pushed them based on the actual code I was looking at and they went to a more senior developer, I guess.

    • Thanks David! I checked and see what you do in the source code. I have reached out to Brainstorm Force for an official answer and will correct the tutorial as soon as I hear back.

  • Hello David, thanks for your post. I use Astra Pro and I’m concerned about css duplicities and conflicts.
    I used to disable the defaults colors and fonts from Elementor and set everything in Astra. Furthermore avoiding conflicts we save unused css, right?

    • Hi Jorge, You definitely want to check the boxes to disable the default fonts and colors. Astra settings will apply in Gutenberg and Elementor, while the Elementor theme settings (the new ones inside Elementor) only apply for content created with Elementor. There are some Elementor theme settings that might not be in Astra, so you might want to set those also.

  • Elementor Pro

    Current Elementor Sales


    Subscribe to the Newsletter

    Scroll to Top