match elementor and astra settings

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.

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

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.

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

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.

5 1 vote
Article Rating

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

Similar Posts

Subscribe
Notify of
guest
26 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Frode Lamøy
Frode Lamøy
Guest
September 19, 2019 7:05 am

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!

Michelle
Michelle
Guest
November 4, 2019 11:43 am

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
*/

fippy
fippy
Guest
January 3, 2020 9:17 am

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

Yegor
Yegor
Guest
January 6, 2020 5:56 am

This post is so usefull for me right now! Thanks a lot!

David Tierney
David Tierney
Guest
January 8, 2020 12:56 pm

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.

adie
adie
Guest
January 15, 2020 11:37 am

Do you have the correct answers yet? I have just followed your tutorial and set 769 x 481

Jorge
Jorge
Guest
May 27, 2020 10:58 am

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?

Jorge
Jorge
Guest
Reply to  David McCan
March 15, 2021 1:51 pm

Hello David, did you see that Astra is providing the feature to set the Responsive breakpoint in Astra and match them with your page builder since last April?
What do you think about this?
https://wpastra.com/docs/set-update-breakpoints-tablet-mobile-in-astra/

adie
adie
Guest
July 30, 2021 3:57 am

What are the correct breakpoints now,? so i can set them. thanks

For elementor = ?
For astra =?

Thanks

adie
adie
Guest
Reply to  David McCan
August 2, 2021 2:00 am

Thanks, David , I appreciate your feedback when you have it 🙂

adie
adie
Guest
Reply to  David McCan
August 4, 2021 3:11 am

Hi David,

Thank you for going to the trouble to find all this out for me, that’s very nice of you.

Should I wait for the new Elementor update for these additional breakpoints? and what would you recommend to set them as? please.

Also, I’m thinking of building some parts of my site with Gutenberg and use some of the Elementor templates inside Gutenberg the thing is I use Dynamicoo and need this plugin and it uses Elementor, so I’m finding it difficult to get away from using Elementor and its bloat and speed. Any suggestions here, please?

adie
adie
Guest
Reply to  David McCan
August 18, 2021 8:52 am

Hi David,
I have just tried the new beta features of Elementor breakpoints and added Astra new breakpoints as shown here: https://wpastra.com/docs/set-update-breakpoints-tablet-mobile-in-astra/

This is what i set for Astra breakpoints here:
https://drive.google.com/file/d/1Mr5WGB9owc1SwxHaG3Ou1xKgcqjKrySD/view?usp=sharing

What should i set for the others?, please

I am still confused as to where to add tablet breakpoints for Astra i didn’t see this in the customizer I see mobile only.

Thanks for your help as always