Breakpoint System Changes in Elementor v3.2.0

As we have published several months ago, we have been working on releasing a highly requested feature – additional custom breakpoints. Core 3.2.0 is another milestone in the road to achieve this goal AND achieve better performance overall in Elementor sites as part of the process. As detailed in our recent blog post, step one of our roadmap is:

Convert hard-coded usage of breakpoints (tablet, mobile, default) to a dynamic system that will utilize registered breakpoints (the two existing ones + future Additional Custom Breakpoints).

In essence, these changes, as well as a lot of UI changes and additions as listed in step 2, are all included in Elementor Core 3.2.0.

Some Background

Custom breakpoints are used for generating custom CSS based on the values chosen by the user.

Prior to v3.2.0, each breakpoint was registered and utilized individually and in a hard-coded manner. They were called and used by name ('mobile', 'tablet'), or via their database setting keys in Site Settings ('viewport_md' and 'viewport_lg', respectively). You can see an example of this in this part of the source code on Github. The reason for this is simple – there are only two breakpoints in the system, and they are always active (even if the user doesn’t choose a custom value, Elementor’s breakpoints have default values). 

What’s New?

In Elementor 3.2.0, we introduce infrastructure that allows generating responsive CSS dynamically, when optional additional breakpoints are added.

Since additional breakpoints would not always be active (each user can choose which breakpoints they want to use), the usage of breakpoints, and their values in the CSS generation system, is now dynamic and not hard-coded. 

Min Width to Max Width

The default values for mobile and tablet breakpoints used to be 768px and 1025px. This is because when the breakpoint values were used in the stylesheet generation system, the registered breakpoint values were actually used in a min-width setup (for example, the mobile device breakpoint was registered as 0px, since it is the lowest breakpoint).

It is hard to explain in a short blog post why and how this was used to produce max-width media queries, but in Elementor Core 3.2.0, we changed this system to work in a more intuitive (and as stated above, dynamic) way. The default mobile and tablet breakpoint values will be changed to a proper max-width 767px and 1024px, respectively.

Prior to v3.2.0, the setting keys for the mobile and tablet breakpoint values were viewport_md and viewport_lg, respectively. They have now been changed to viewport_mobile and viewport_tablet, respectively. 

Backwards Compatibility

It is important to state that all of these changes are fully backwards-compatible. The legacy breakpoints settings will also be updated in the database, with adjustments to the old system. All of the old settings and APIs will still be available.

For example, to fetch Elementor’s breakpoints in PHP, you would call the  Responsive::get_breakpoints() static method. This method returned an array such as the following example:

	'xs' => 0,
	'sm' => 480,
	'md' => 768,
	'lg' => 1025,
	'xl' => 1440,
	'xxl' => 1600,

In JS, you would access the globally available elementorFrontend.config.breakpoints object which returned an identical structure.

These methods will still be available, but they have been entered into a deprecation process and will be removed from Elementor in the future. 

It is highly recommended that you migrate to use the new system, as detailed in the next section.

A New Breakpoints Class

CSS generation used to be based on the \Elementor\Core\Responsive\Responsive class. This class is becoming deprecated, and is replaced with the brand new Breakpoints Manager (\Elementor\Core\Breakpoints\Manager). All of the old functionality will still exist, but through the instance of the Breakpoints Manager, accessible programmatically via \Elementor\Plugin::$instance->breakpoints.


To get the default breakpoints data on the PHP side, you can call \Elementor\Core\Breakpoints\Manager::get_default_config(). This will return an associative array of breakpoints, each with 'label', 'default_value', and 'direction' (min/max) properties.

To get all breakpoint values, you can call \Elementor\Plugin::$instance->breakpoints->get_breakpoints(). This will return an array of breakpoint instances, like so:

	'mobile' => {Breakpoint class instance},
	'tablet' => {Breakpoint class instance},

You can query each breakpoint instance for its value, like so:

$breakpoints = \Elementor\Plugin::$instance->breakpoints->get_breakpoints();

Or, a shorter version:

$mobile_breakpoint_value = 
\Elementor\Plugin::$instance->breakpoints->get_breakpoints( 'mobile' )->get_value();

For similarly accessing just the active breakpoints, call \Elementor\Plugin::$instance->breakpoints->get_active_breakpoints().


In JS, you can access the breakpoints object at elementorFrontend.config.responsive.breakpoints. The active breakpoints object is available by accessing elementorFrontend.config.responsive.activeBreakpoints.

What Do I Need to Do to Prepare for 3.2.0?

If you are a user – you probably don’t need to do much except the usual – back up your database before updating, and in case you use any 3rd-party add-ons to Elementor, make sure they are all up to date as well.

If you are an extension developer – make sure your extension is compatible with the new version. If you use the breakpoints system in any way – we highly recommend you migrate to using the new breakpoints system.

Once your plugin is successfully tested with Elementor 3.2.0, we also recommend updating your Elementor Compatibility tag accordingly.

What’s Next

Going back to our previous blog post, the last step in our roadmap is to modify and adjust the way controls are used, while making sure that the addition of multiple new breakpoints doesn’t harm performance. Stay tuned!


Udi Dollberg
Udi Dollberg
Udi is a talented developer in Elementor’s Editor team and loves cars, woodworking and classic jazz.

7 Responses

  1. Hi this is an excellent post, but I have a question…

    How do I change the values of the \Elementor\Core\Breakpoints\Manager::get_default_config() ?? because currently I can not set values lower than the default ones so I want to change those values to 200 in mobile and 200 in tablet for example!

  2. @Udi,
    media queries using max-width is an anti-pattern.
    in Elementor there is bug with fractional pixel width of 767.2px
    there is a hole in the breakpoint system between 767 and 788px where UI is broken.
    you can see fractional pixel width using Zoom feature of browser +/- or with fractional display resolution from High Density displays with pixel densities such as 1.25 or 1.5.

    proper media queries are always constructed “mobile first” which means we make the design for mobile with no media query. then we use “progressive enhancement” which should always use media (min-width) to target ever greater resolutions. i think Elementor needs to take another look at the css and do additional testing around fractional pixel display widths. thanks for your consideration.

    Hugh a.k.a. FirstVertex

  3. Hi Hugh,
    Thanks for your comment. Apologize for the delayed response, I only saw this now.
    First of all, theoretically you are correct. A mobile first design would be better in general.

    Changing this would be very difficult and quite “dangerous”, for a couple of reasons. Firstly, Elementor is an open source product with over 900 3rd-party extensions, all relying on the current `max-width` based system. Changing the system’s direction would probably break A LOT of them.

    Secondly, it would require a massive effort, which is low-priority.

    Regarding your comment about 767-788px – I do not see any evidence of any issue. As opposed to the fractional pixel width, in which case I can understand how problems could happen, I just don’t understand what’s so special about this range of pixels you mentioned.

    If you provide specific use cases which are reproducible for those two cases, that would be instrumental in us being able to address them.

  4. I’m getting confused about breakpoints on my website for all devices. when I change in tablet portrait it changes automatically in the laptop view also. Kindly help, and please suggest me best break point for all devices. It would be better for me and please mention with name e.g. widescreen-2500px
    laptop-1440px like this. Kindly provide me the best break points in all devices
    (widescreen, laptop, tablet landscape, tablet portrait, mobile landscape

Leave a Reply

Your email address will not be published. Required fields are marked *