Set Custom Media Query Breakpoints about elementor

[arielk]

As from the last version (0.8) we're using these two primary breakpoints:
A. 768px and below for mobile.
B. 1024px and below for tablet.

I think that it covers the most devices. We prefer to keep it more simple for most users.
For more customization you can always use custom CSS.

[joshallen73]

CAN I say something nice here? I rate Elementor 5 Stars in mostly everything. My question is how come you spent months designing blocks that are cookie cutter -instead of spending all time and money (staff hours) on THE MUCH FREAKING NEEDED media viewpoints and even custom breakpoints. BUT HERE I DO LOVE THE fact you can choose mobile, desktop and tablet and Elementor remembers the settings.

1. Where are the Mobile and Tablet Landscape Settings?
2. Where are the laptop (1300-1600px) settings?
3. Where are the 4k and 5k settings?

Case Study - I design all 40 sites on my MICROSOFT SURFACE STUDIO which is 4k - then I view it on a laptop that's 1920 by 1080 which was standard in 2016.

BUT HERE IS THE MESS UP - my clients are ticked off because on their crappy apples from 3 years ago -the resolutions are 1200 px, or 1388, or 1400 range -well the views look all crap and buttons are stacked, menus are flying off the page and stacking as well -images are out of wack and not aligned....

SO I try to figure OUT A WAY TO FIX THIS BUT STEVEN HAWKING passed away - BUT then a coder friend tells me that this is not that hard to implement - THEY CAN JUST CLONE THE FUNCTIONS OF THE OTHER BUTTONS (RESPONSIVE VIEWS) and set dif media query settings/formulas.....IDK

IM GETTING READY TO THROW MY COMPUTERS OFF A CLIFF and TAKE A CHAINSAW TO THEM and then smash them with a sledgehammer.

P L E A SE HHHEEEEELLLLPPP - CAN WE PUT ALL OF OUR ATTENTION ON THIS????????

@drank - I feel your pain.

PS Most of the people who buy elementor will make original designs -not use the premade blocks....PLEASE DONT WASTE ANY MORE TIME ON THAT - I will fund this!

SORRY JUST STRESSED - TOO INVESTED IN ELEMENTOR TO BACK OUT -

SEE IMAGE

[peepshow]

@arielk the main thing that I think is needed here is the ability to control when the columns collapse, and how they do so. For example I have a 4 column section that I'd like to collapse to 2 columns at around 1024px, and then to 1 column at around 600px. Currently it just gets squeezed down until it drops to 1 column at 768px, this doesn't work as well as it could.

The new media based padding and margins are excellent, thank you for that addition. But greater control of column collapse would make a huge difference. @hybridvision is right on the money, MQ's aren't about screen size as much as they are about content. Also there aren't actually 3 prescribed screen sizes, there are hundreds of device sizes and it's important to have some control of layout no matter what.

Elementor is a great tool, and the improvements are coming think and fast, thank you for that.

[paulrudy]

I would like to suggest at least allowing adjustment to existing default breakpoints in Elementor.

Elementor works with a user's theme, and it's the theme's responsive breakpoints (if any) that determine the display of things like headers, footers, etc. that Elementor doesn't control.

When the breakpoint of the theme is different from Elementor's breakpoint, the page behaves oddly on resizing. More importantly, Elementor widgets and theme elements don't coordinate properly, so a user without css experience will discover that their responsive settings aren't working and have no way to fix it.

For example, a site built with the Generate Press theme will have a mobile max-width breakpoint at 768px, while Elementor's mobile max-width is at 767px and tablet min-width is at 768px. In an iPad in portrait mode, any theme elements set for mobile-only will be on, but any Elementor elements set for mobile-only will be off.

All an average user would know is that they selected certain things to appear on mobile in their theme, and other things to appear on mobile (and not tablet) in Elementor, and it doesn't work.

An advanced setting in Elementor would help average users make Elementor work more seamlessly with their chosen theme's responsive settings, without having to ask for help and learning about custom css.

[ddenev]

@bainternet, I did not ask for an ETA. The ETA is long overdue - just check the OP date :)

OK, would you care to show the current Elementor roadmap? This will clear all doubt regarding how you guys prioritize all the requested features. Do you have a roadmap or at least an implementation plan for the next 3-6 months? Or do you simply pick, as @Orlandoo said, only the "nice-to-have" ones in order to add some sugar so that you can write a glorious blog post about the new shiny "toys" (https://elementor.com/autosave/ - we can dissect this if you want). If you don't have a triaged list of improvements/bugs, I can do this for you :)

Guys, let's be honest here. Elementor is a great tool but if you continue focusing on sugar instead on the real requests that come from core users (as, for example, Tom Usborne does, and by the way you could learn a lot from his approach to improving a product) Elementor will become just the next bloat, like Divi, Visual Composer, Avada and you name it - a lot of customers but low actual value. So it boils down to - are you focused on Marketing/Sales/Profits more than you are focused on Development and Improvements?

I'm not saying that just because I am a paying customer you should listen to what I say. I am just saying that you should listen to the users who are using Elementor and who want to use it even more, hence they are striving to make it better. Not bells and whistles but real usability and efficiency.

As mentioned earlier - sorry for being harsh and PITA but I DO want Elementor to improve and I am currently worried that you have a different definition for "improvement".

Peace!

[hybridvision]

@arielk: It's necessary to control breakpoints because they should be chosen based on the design and content, not specific device sizes (which will become outdated). More info here.

PS: Elementor is great and keeps getting better, thanks to team Pojo!

[lukecav]

That would be a cool feature.

[ddenev]

@hybridvision, @dasigna

Of course there are technical difficulties. In every piece of software there are always challenges to overcome. There is no surprise here.

If we focus on the current topic, at some point in the past the Elementor Team made a decision - to implement the responsive breakpoints in a particular way and now we discuss the results. It is perfectly OK that they might not have known the consequences of their decision and that they thought that they are implementing it in the best possible way.

But if the time proves that your decision was not the best one (I would not want to name it "wrong") in the past then NOW it all boils down to:

1. Are you willing to take the extra mile to improve and correct the consequences, which also means being responsible for your decisions, admitting the error and work the shit out of you to fix it?
   OR
2. Are you deliberately ignoring the fact that you fucked up and rather prefer to gain new users by introducing sugar coated "featurettes" while caring less and less with time about the current users who get to know the product better and better each day and hence they demand more and more core improvements?

As an example - Atlassian (the creators of JIRA) have generally taken the 2nd approach. There are requests from core users dated more than 15 years which have been requested by thousands of paying clients without any resolution by Atlassian. They simply prefer to develop new features because for them the "new client" is more precious than the "existing client".

So far, IMHO, Elementor Team shows signs of the 2nd approach as well. I pray to be wrong here and the future will show. I like Elementor, that is why I am so passionate about this - because I'm a firm believer in "quality over quantity" and quality demands listening to feedback, admitting errors and taking corrective actions.

I'm sure the Elementor Team are a great team. But they should acknowledge that they also possess a great community of deeply knowledgeable people. If they fail to harness this power, they will soon or later be going the Atlassian/Divi/Oracle way full speed. /Yeah, Oracle are rich but nobody would want to work with them weren't they forced to/

So, dear Elementor Team, what about the 2.0 roadmap - does it include this improvement or not?

Best regards,
Drago

[michaelnorthern]

@rwill007 Agreed, but it doesn't seem to be happening. My impression is there's much more interest in flashy features than fundamentals. Add more, more, more, then die under it's own weight.

…

On Thu, Apr 5, 2018 at 11:06 PM, rwill007 ***@***.***> wrote: Version 2.0 will be a major shortfall without this feature. This is the feature that if added makes Elementor the king of WP builders. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#78 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFysIigqIee7dFsBammv7y4mIOF_YF6uks5tlwX_gaJpZM4I1s77> .

[arielk]

Just to understand why it is so necessary to control these settings.. Is breakpoint for Mobile it not 768px (or 1024px for tablet)?

[ddenev]

Dear Elementor Team,

why not implement this much-requested feature and implement the IMHO useless "Typography pop-up" instead? I've been using 1.9 since its beta and must say that the only useful new feature (over 1.8) that I use is the moving the "My Library" link at the top in the admin menu. Other than that not much changed in my workflow since 1.8.

What's stopping you from focusing on real improvements, requested by your users, such as this one?

Thanks and best regards!

[rwill007]

Version 2.0 will be a major shortfall without this feature. This is the feature that if added makes Elementor the king of WP builders.

[stratboy]

I'm one of those that wrote more on this thread. I used Elementor for several sites, as a developer. I had too much troubles and abandoned it for just good use of ACF plugin. And I'm trying Gutenberg right now. It's not yet mature, but it will soon, and for really professional websites, it will win, period.

Elementor has several problems apart from breakpoints, as all the page builder, except Gutenberg.

One of the problems i pointed out in other threads, is too much tag nesting levels. This impacts performance quite heavily in situations where repaints are critical (for example on one-page sites). Gutenberg code instead, is neat.

Another one: in all, and I mean ALL sites we buit with Elementor, our clients stucked at the editing content phase of the project, even teaching them how to do it. So websites stayed in staging phase for several months until we developers/designers had to do all the data entry job OR the client hired a new person just to do content entry. So, as I stated more and more times to the elementor devs: Elementor si not for end users, it's still for pros. Exactly as any other page builder. And this is the major fail. And thus, again, (I said this several times to them) they MUST do what we pro ask. They had to listen to our suggestions and implement them. Elementor is a tool for pros, and pros are those who make the web. So if you want to win the web, you have to make pros happy first.

And again, Gutenberg stays exactly in mid line instead, and is definitely approchable even for the average office employee.

And in fact, I just wrote this all only to say again, they will fail, because the do not listen to us.

But there's another thing: maybe they simply are not interested in this specific type (professional websites) of market. Maybe they simply found out that they make more money staying on the low quality websites market share, just as divi and the like. And that's simply business, and maybe they're doing it just right.

[Sataptech]

Screen resolutions are improving all the time, option for more breakpoints is a must.

[carasmo]

To set a custom break point, you would use CSS and add a class in the advanced settings or use the filters to make your own setting. Make sure your CSS comes after Elementor's CSS.

Add a class to the section with columns custom-break-point-width-1024

Then add your own CSS after (I use the elementor/frontend/after_enqueue_styles) hook.

@media (max-width: 1024px) { 
	.elementor-inner .custom-break-point-width-1024 .elementor-row {
	    -webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	}

	.elementor-inner .elementor-reverse-mobile.custom-break-point-width-1024 > .elementor-container > .elementor-row {
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: reverse;
	    -webkit-flex-direction: column-reverse;
	    -ms-flex-direction: column-reverse;
	    flex-direction: column-reverse;
	}

	.elementor-inner .custom-break-point-width-1024 .elementor-column {
	    width: 100%
	}
}

[nicolasblume]

Please implement custom breakpoints in the frontend! We are a non profit group of students, managing the website of our dormitory and we have the policy that we can not spend any money on software, so we can not buy the pro version to get custom css.

But a frontend implementation would also be better for pro users, because it is much easier, faster and more flexible.

[stratboy]

@black-eye yes, but i don't think it would be so difficult adding a couple more breakpoints, once done what discussed above. So I think this one it's a good feature request to add.
To me, this would be perfect:

• 6 manageble breakpoints
• 3 of the 6 would be the defaults for Elementor (small, medium, large)
• 3 of the 6 would be optional auxiliary ones, meaning they would be totally up to the developer

I generally use these in my projects:

small
small-aux
medium
medium-aux
large
xlarge

I then always manage at least small, medium, and large. Occasionally, I make use of the others.
Small-aux and medium-aux do end to the same values of the small and medium ends, but do start after. For example:

small: 0-640
small-aux: 480-640 // same end of small
medium: 640-1080
medium-aux: 840-1080 // same end of medium

Anyway, to the devs: 6 manageble breakpoints, that's all, that's what we all want! :)

[pingram3541]

This is one of those additions that would help me immensely and reduce a ton of manual css while also making it easier on my customers who expect the Elementor settings controls to work and as we know, when using custom css it often also overrides the edit-ability within Elementor because it's hard coded for a particular custom size constraint.

If we are going to focus on Elementor being the easiest and leanest free page builder with tons of free elements for the avg consumer, can we then focus on Elementor Pro being the most advanced and feature capable for pros? This way you appease both markets, the consumers and the pros.

[bodhi1970]

Is there any possibility to change breakpoints in the Pro version of Elementor except with custom CSS?
It seems an important issue for many users.

[vongoh]

+1

Dealing with this now.

I'm using two columns to build a page.

On desktop the left column is main page content. Right column is a sidebar set HTML tag 'aside' to build the sidebar.

This way I can bypass the theme sidebar entirely and build the entire main page area with Elementor (and I build header and footer in Elementor too, using Nav Menu plugin and GeneratePress hooks)

The page looks amazing, total control ... the sidebar column drops down under the content column in Elementor tablet preview just fine ...

However when I check it in the browser - the sidebar column is not dropping down under the content column when I need it to.

It keeps narrowing till unreadable at about 1050px browser width. So the layout is broken in the sizes between 1050 and 768px When I check it on an iPhone 6 and iPad simulators the columns are jammed up next to each other and it looks horrible.

I will echo what others have said above:

Breakpoints need to be set by context of the design and content for a specific page in a specific project - and a specific column as well.

Elementor needs this feature, it potentially affects a lot of people visiting these sites.

[pxlrbt]

+1

This is debated for over a year now. Is anybody caring about it? Can't be too hard to add a filter to overwrite breakpoint sizes. I'm using widgets which are not wrapped by columns and break on their on and I wanna have the columns break at the same breakpoint.

[Orlandoo]

@bainternet

As you can see this feature is much requested. In my opinion it is a must have, I won't use Elementor until it is implemented. And I can't understand why you build new features that can be called nice-to-have, but are useless until the prerequisites to work with Elementor are fulfilled.

It was a big mistake when I decided to pay for Elementor Pro. You stuff Elementor with toys and more toys and move the important things far into the future. Everytime I get an email saying "Hey, we have implemented this new feature in Elementor. How great is this?" I'm only disappointed and ask myself "What is it good for?"

At the moment Elementor dictates the breakpoints. That is not acceptable. We don't need half hearted promises and we don't need excuses. We need a stable future-proof solution for custom media breakpoints.

[stratboy]

Sorry but I'm totally with @Orlandoo (and all the others). Fact is, Elementor is not for end users, is not for non-developers. All the things 'you'll do without a line of code' in fact do not fully work and never will. For professional websites (and here I mean exactly 'professional'), only few end-users will be able to do all the things all alone. The vast majority of the people (and here I'm speaking out of 20+ years of web development/design) will need a developer either to set the first steps, or to learn Elementor (teach), or to have some custom widgets, or most probably all the three and more. Pro web is not done without a line of code, never, because it's a too custom thing. This means any pro tool needs to be built even for developers. This means Elementor will be often used to built essentially custom per-project themes. This means there will be a bunch of custom photoshop canvas behind, and a web designer. This means all-custom requirements, and thus custom breakpoints. Period.

That said, I use Elementor exactly because I feel it's currently the most developer-friendly tool of this type out there, so THANK YOU developers. But strangely enough, it still lacks very few but fundamental little features, ones that fully unlocks custom development. They should be implemented as fast as possible (I keep posting things and suggestions about those). Then you can add all the toys in the Universe forever and ever, we developers don't really care and won't stress you anymore, anyway.

[dasigna]

yeah. possibly not that easy as thought by the majority.
and right as well - 'long time request' ...

but in the end i dont think the real problem is that things take much longer than we all are hoping for... imho many things would be far better to understand if there were some slightly better communication from elementor-side :)

personally i am not one of those thinking "my wish is your command" and even further it has to be fulfilled immediately - no. but i really would appreciate if there was a kind of roadmap and at least slight information about current development.
others manage to do this and (although not knowing the individual manpower of each dev-team) this is great. at least it gives a sense of being as well informed as involved and a better view into development and maybe approx. timelines.

so for this case (as well as for others) if there would be any statement kind of "this might come under development after the themer release, which is around march..." this might bring already some soothing :)

elementor (and pro) is already great and has matured remarkably since its release - but the rest of the market is not in deep sleep. in contrary - sometimes their efforts since the ongoing success of elementor are really 'frightening' ...

so surely a little bit more of information about whats going on and probably when would give the whole thing that extra something.
lets clear the fog.

EDIT:
not to forget to mention: you guys from elementor doing a really great job! keep up the great work!

[cavalierlife]

@carasmo Thank you so much for the CSS above. That helped me tremendously today. I wish I knew how to implement the custom control code you have above. That would be even more awesome. But you've saved my day with that CSS.

It would be immensely useful to have the ability deal with landscape mode. That "gray area" between 768 and 1024 (1080 for me actually) is a cesspool for some designs, and not so bad for others. But those edge cases really need some ability to control landscape tablet mode.

[black-eye]

+1 for me too
It is essential for working with different themes or the layouts based rather on the design and content, than on specific device sizes.

Extra breakpoint between 0 and 768px (quite a huge area to have all the content in one single column) would be nice too, but it's a different issue.

[nicolasblume]

@stratboy I approve your suggestion by 200% ! Would be really awesome and helpful if that would be implemented :)

[Orlandoo]

I found this thread by searching Google for "elementor custom breakpoints". I can't believe that it's not possible to choose these values in elementor. For me that means that I will stay with Beaver Builder.

[simonbouchard]

+1 This feature is a must ! I'm struggling right now with Elementor + Bootstrap 4.

[vsimon51]

+1

[AThoss]

This is a must have feature. Any progress on this?

[icecandy]

+1
I would in particular like preview in tablet and phone landscape mode and to be able to set the breakpoints too.

[craigallyn]

+1
I need to set breakpoints. When choosing between Beaver Builder and Elementor, I assumed you could do this on Elementor. Currently, Samsung tablets are falling into the Mobile category and layouts look terrible. No way to address this without delving into CSS, and I don't want to do that.

[pingram3541]

Hmm, maybe one day Elementor Dev version =)

[ddenev]

Oh, and for everyone who is currently in pain because of the lack of responsive breakpoints management in Elementor, check the Microthemer plugin - not native to Elementor but does the job greatly - and is backed by a great and a very responsive developer.

[ddenev]

I think Elementor Dev team closed it because they actually implemented the OP's request - to have custom breakpoints :) What we now need is a separate ticket that phrases the request more precise - to have the ability to add/remove/edit custom media breakpoints, in addition to the built-in ones.

[artneo7]

It would be nice to add at least another resolution for 10" Netbook, for example (1024 x 600 pixels). Today there are only 3 options. Adding another 1–2 sizes should deal with most common screen sizes.
I use this tool http://quirktools.com/screenfly/ – adding medias queries inside custom CSS tap can quickly become messy…

[bodhi1970]

I am wondering why the developers are so against it and are not implementing it even there are already great solutions out there?

…

On 22.01.2019, at 03:57, laratuk ***@***.***> wrote: I was very tired about this issue. I finally found workarounds using this great addon https://pafe.piotnet.com/. There are lots of great features other than Custom Media Query Breakpoints — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[Haim6130]

@stratboy , I completely disagree.

1. For now, Elementor is the best page builder for Wordpress BY FAR, allowing designers to build beautiful websites from scratch, like no other plugin out there do.
   Elementor changes the world of website design, and it's just on it's start. the product getting better every upgrade.

2. Your clients can't edit with Elementor? Wow. Who are your clients?
   I created a 15min vid of me teaching how to use Elementor to edit content, sending it to my clients after completing their website. Non of them asked me a single question about editing in Elementor after watching that video. It's that simple.

3. Gutenberg? really? Far away behind, with harsh rating and angry disappointed users... better for them to just buy Elementor and invest in it.

4. Sites are heavy? every page in my websites is loading in 0.5s (using WP-Rocket though... but I'm happy, also my clients).

5. Elementor Don't listening to us? just put yourself in their shoes. I'm not saying they shouldn't, but I'm sure it's not that easy as it sounds.

@stratboy... you may call me an Elementor Fanboy, but after 10 years of web design... I just appreciate a really amazing product that gives me and millions of web designers an opportunity to bring their designs to life.

Just give them more time. for now, it seems to be worth it :)

[dasigna]

... i can follow both points in principle - the one of the user/developer and the one of the elementor guys. the first tends to demand every possible feature and the latter makes the choice that suits him :)
BUT: i am still not able to follow elementors decisions in some points too. this is one of them. the demand seems to be quite huge - the age and the number of this closed (!) thread claims it. and: as already mentioned before, there are great examples out there how it can (and should) be done.

yes, elementor still is 'the' pagebuilder out there but should listen more to certain demands to keep that place. custom query breakpoints should definitely a far more granular native feature - at least EL should give more preview options than it has now. (stil not able to follow the statement that tablet landscape e.g. should be "not useful"... - just look around and see how many people use their tablet this way!) and no - i dont want to use another plugin or extension for every tittle basic thing that elementor is lacking of! (and get a dozen other 'features' i dont need or that are increasingly doubled several times)

i agree that it is quite difficult to follow every demand and also that not every demand might be useful for the majority. but this ist definitely one that is a must have feature for design. just my 2cts.
as far as i am concerned, elementor currently seems to tend far too much towards advertising, conversions and things alike - and major design features are left behind. sadly. there are still some more examples in this repo ...
and yesss, agree to the possible ability to enable/disable features and widgets anyway.

elementor is great. no doubt. but keep up to stay great. elementor mainly is a design-tool - so polish that. please.

ps:
little remark to gutenberg - this is still in its baby shoes and currently no friend of mine too! but let it take the next few steps and that might change drastically. automattic obviously is building up a weapon against its opponents who already offer native drag'n'drop design and obviously too has the power to beat them sooner or later. elementor (and others) might be an unintentional victim at some point (maybe still some years away, but well enough possible) - if they dont care. so they should take care.

[peepshow]

In the meantime can anyone suggest the best/most sensible way to override the default breakpoints?

[wilthil]

+1

[lunacroft]

👍

[dasigna]

... o.k. so you had landscape view and it 'wasnt helpful' - dont know who decided that, but this was helpful indeed for me to follow the demands/request of the clients.

everything else to custom previews or breakpoints is already mentioned above, and that does matter as you have to 'fiddle' about the right way of responsiveness on about every new site (or sometimes page). so dont let that vanish out of sight!

it may be a solution for average users to keep it as simple as possible (which is a good point), but in my opinion there should be a way for the advanced ones (or designers) to deal with custom settings (or even better for some things: global settings for the end user).
maybe put that into a pro version if you want to - i'll buy it.

[stratboy]

This feature should definitely be implemented.
Anyway, how to override for now?

[stratboy]

@carasmo this is interesting, thank you. The elementor/frontend/after_enqueue_styles hook is not documented yet, but I can see it in frontend.php, in enqueue_styles() function. Thank you.
Though, there are no filters in /includes/responsive.php.

Anyway, for now, one can override like suggested.

[carasmo]

I found elementor/frontend/after_enqueue_styles by reading the readme.txt https://github.com/pojome/elementor/search?utf8=%E2%9C%93&q=elementor%2Ffrontend%2Fafter_enqueue_styles&type=

You're right, there is no filter. I should have written the elementor/element/before_section_end action, which allows you to add your own control and then you add your css.

/* 
 * Add Custom Control
 * https://github.com/pojome/elementor/blob/master/docs/content/hooks/php-hooks.md#elementorelementbefore_section_end
 *
 * https://github.com/pojome/elementor/issues/26
*/ 

function themeprefix_elementor_controls( $section, $section_id, $args ) {

	if( $section->get_name() == 'section' && $section_id == 'section_layout' ) :
		
		$section->add_control(
			'themeprefix_custom_breakpoint',
			[
				'label'        => __( 'Custom Column Breakpoint', 'text-domain' ),
				'description'  => __( 'At what width do the columns stack and become 100% wide? Under 768px, use custom CSS', 'text-domain' ),
				'type'         => Elementor\Controls_Manager::SELECT,
				'default'      => '',
				'options'      => array( 
					''            => ' ', 
					'width-900'   => '900px', 
					'width-1000'  => '1000px', 
					'width-1024'  => '1024px', 
					'width-1200'  => '1200px', 
				),
				'prefix_class' => 'custom-break-point-',
				'label_block'  => true,
			]
		);		
		
	endif; // Section Custom Controls
		

}
add_action( 'elementor/element/before_section_end' , 'themeprefix_elementor_controls', 10, 3 );

[stratboy]

Good, but this seems about specific sections, not global. Also, we really would need a filter to modify core breakpoints, so the user can then style elements by himself based on global presetted breakpoints. The solutions above can help a developer, but don't allow the end user to take full avantage of the Elementor Editor.

Anyway, it's another way, for now, so thank you. Again, I hope developers will simply add some filter to responsive.php :)

[stratboy]

@nicolasblume they could implement it in backoffice, but anyway, what I was asking here is to add filters to responsive.php, and this would not be a Pro feature, it would just be a global one and you could then use it to add your own breakpoints via php.

So in any way, no frontend would be implied, nor the Pro version.

[stratboy]

It seems we are all waiting.

[vsimon51]

Very sad considering how important mobile devices are now. Revolution slider is a different beast, but they have 4 sizing options where you can set the breakpoints. Arguably you need 5 - laptop plus tablet x 2 (portrait and landscape) and smartphone x 2 (p & l). It's hard enough to make everything play nice without having to hard code in css.

[stratboy]

We need it.

[stratboy]

Developers: so what?

[bainternet]

@drank

As you guys know and can see here in the repo, we have many requests which we do try to implement, but as far as ETA goes we can't really commit to a date.

But as long as the issue remains open or labeled it will get a solution/response/implementation.

Thanks for the suggestions.

[michaelnorthern]

+1 Glaring omission. Lack of easily configurable break points will keep folks in the Beaver Builder camp.

Am I understanding this correctly? I can set my theme breakpoints, but Elementor will not respect them? So I get a mixed bag of behavior depending if the element is controlled by the theme or Elementor? That's a ridiculous mess.

My impression as a new Elementor Pro user is that Elementor is more interested in adding features than making existing features work as they should. Over and over I run up against elements that have quirky or partially implemented controls.

It's FAR better to err on the side of stability and robust controls, then to add more questionable features.

Elementor is terrific. I hope the developers have enough foresight to not go down the road of feature creep > bloat > disappointed users > demise. I'm looking at you Divi.

See search interest trend: https://trends.google.com/trends/explore?q=%22divi%20theme%22,elementor,%22visual%20composer%22,%22beaver%20builder%22

[stratboy]

One thing that makes Elementor really stand apart is its potential of customisation. You can really tweak a lot of things via filters and actions, and also quite easily create new widgets. But breakpoints seem not to be as easily tweakable as the other things. Since it's clearly a developer feature, or in other words, a feature that is going to be used mainly from devs, I really think a simple api filter would be enough. Ability to use it to tweak the 3 existing breakpoints plus the ability to add some more breakpoints if needed.
That would be plain great, AND, no matter if there would be no buttons for the added breakpoints (currently many widgets feature 3 buttons for preview with existing ones). I think that it would not be a problem if the weren't more buttons, because devs do all via css, no need to brealpoint preview.

So please, do it. :)

[black-eye]

@michaelnorthern, I cannot agree more...
Just a few days ago, I came across this review here: https://wordpress.org/support/topic/intuitive-tool-but-missing-a-primary-feature/

Well, 5 months & 2 weeks went by and "one of the things we have at the top of our list of priorities" is still here.

I understand, that Elementor team is now quite busy finishing the upcoming Themer (which I have really high hopes for), but after that, please, please, keep on polishing the existing core features, before adding the new ones.

[pingram3541]

In response to stratboy we would have to be asking for additional icons as doing it via custom css is what we are doing now. Just by defining a new media query in css makes it exist but doesn't make it easy for our clients to tweak.

No we want the icons for GUI access to additional break points and with it it creates an additional json wrapper for which to save that width's settings. The icons would need to be generic of course but at least tool-tip/hover id reveal the break point size to make it easy.

I only want this so it makes it easier for my clients to make changes and NOT have to get confused because I used custom css somewhere and they think Elementor is broken.

[michaelnorthern]

@black-eye Yes, good point. Well, the folks are Elementor are working hard I'm sure, and things do take time. I don't know anything about the Themer, I'm simply advocating for fundamentals — core features that are stable, complete, and work well.

[michaelnorthern]

@pingram3541 Yes, exactly, it should be clear in the GUI . . . for everyone.

[stratboy]

@pingram3541 sure it would be better, but since it would start to be too much time cosuming to code even custom buttons, I think for now there's not all that need. Sure in the future, as a second iteration, but for now, just barebones is far more than nothing. Also, 1. not always additional breakpoints are coded, and 2., really not always they are used by end users. I have exactly zero clients that would even use that something-more-than-medium breakpoint: It's only a thing I'll use as a coder.

Thing is, we (coders > not clients) are waiting for custom breakpoint since 2016: asking simple things first, maybe helps having something. If we keep asking the moon, maybe we are going to wait quite forever. Get the point?

[hybridvision]

Looking through the code, it seems like there are at least the beginnings of being able to customise the breakpoints: https://github.com/pojome/elementor/blob/master/includes/responsive.php.

However, I think this is a much more complicated feature than many people assume and it will take a lot of changes (for example in the CSS there are a lot of hardcoded values that would need to be made dynamic).

I've been working a lot with Elementor and I'm really impressed with the way it has been designed and structured. With increased popularity comes a multitude of opinions on how it should work and we all have differing needs and wants... So far I think the Elementor team has found a good balance in the way they've implemented each feature and I sincerely hope that continues, even if it means certain features take longer to arrive.

Like everyone else, I would love to see some progress on this feature - maybe starting with some response from the core Elementor team to share their perspective. It's a great product and this is an important feature so I think we could have some productive discussions around it. Also, as developers, we're not powerless and we can submit pull requests and suggest specific improvements :)

For now, I'll continue creating custom widgets (the API is great!) to handle more complex bits of content, thereby allowing me to handle all the breakpoints as needed. By doing this and using proportional CSS (percentage / vh / vw units), I find there's much less need to tweak individual element settings and that makes both me and the clients happy.

Thanks for all the amazing work, team Elementor, and I hope we can have more of your input into this discussion...

[stratboy]

Or, another way, for devs only: simply a button to disable breakpoints. Probably that would be just what we need as developers. We already have breakpoints and style widgets all the time. So it would be great and enough, at least to me, just a button to switch off elementor's breakpoints and related functions, so they turn to be all up to the dev. Make sense?

[michaelnorthern]

@drank

Example: Elementor recently rolled out a CTA element. They seem proud of it. It does look great. But it's not core functionality, and it's mostly about motion graphics — moving text independently of background images, zooming boxes on hover, things floating around in various ways, etc. The research I've seen shows that movement (sliders, video, and so on) actually DECREASES conversions because people are distracted by the motion — they miss the message, don't click-through as much, click off the page, etc. A feature like this is mostly shiny-object fluff. This suggests to me that Elementor is operating closer to your second scenario: bolting-on questionable features rather then building a solid foundation. I hope they prove me wrong. Final thought: do the folks at Elementor actually pay attention to threads like this, or is it just chatter, a way for people to vent?

[obe1968]

All I can say is WOW!!! Well, not really, there is more. I understand and agree that having better breakpoints for Elementor is needed and much overdo, but I think telling the dev team how wrong they are and blasting them with child like temper tantrums is not the way to go about it either. If users aren't bitching about this, they will find something else to bitch about. The dev team is working on many multiple issues at one time, and who knows, there may be a GREAT big surprise in 2.0. Devs are complaining about breakpoints and other issues, noobs are complaining about themer. When is enough enough guys!! You know, there are A LOT of smart people tracking stuff in the github site and the Facebook groups, and my question is, instead of being another user bitching problem, why don't you work on becoming a part solution? If all it takes to make this happen is xyz (a mod to the functions file) why not build a test site, make it happen, find some users new and advanced to help test, and then submit to to Elementor to have them add it to the core instead of blasting them, telling them what they need to be doing, and when to do it by. By the time all of this complaining and witch hunting was done, there could have been a whole of more positive and constructive issues resolved in my opinion. I mean if a lot of other people can be writing add-ons, certainly someone in Elementor land knows how to modify and add the breakpoints. Now quit whining or find something else to use, and let them finish their work!!! They are well aware of the need and issue, and no need to bash them anymore!!

The product from a user base standpoint and needs is growing daily at a rapid rate, is still very new to the overall market, and with it is going to have to come some patience. Keep up the great work and in your own time Team Elementor, and if you lose some users because they don't get want they want, when they want it, so be it.

** End Rant **

[rwill007]

@obe1968 My friend, you really need to chill. Anyone tasked with providing a solution to hundreds of thousands of users should know it's the nature of the business that you can't please everyone but definitely accept and welcome the complaints as they make you better in the long run. It's no my personal way of doing things but I really don't see why you make it your problem to address other people that are complaining, the world is full of all kinds of people and you need to let people express themselves. If you don't like it, turning around to then complain about the people complaining is quite silly.

[carasmo]

I had some custom break point code in here, just a heads up, it doesn't appear to work now. I haven't had time to figure out the CSS problem (the php still works), I am not using Elementor very often and never implemented the code on a live site.

Has anyone got working examples?

[faebe]

+1

[parfilov]

I'm in business too

[chrolm]

Going to add a +1. It's a pretty basic but very important functionality. I don't honestly care if we have to add it in a piece of JS or CSS - but being able to set the breakpoints is imperative (and another 1-2 are needed).

[aninaA]

+1
We have a different breakpoint in our Theme Navigation and would like to have the same breakpoint for Elementor as well. Plus, we would like to implement more breakpoints in future releases and would therefore need this feature asap. Thank you for implementing!

[oshibobo]

+1

[parfilov]

My subscribers are often asks about disabling responsiveness. Please pay attention on it.

[BurningLoveMedia]

I am in pretty desperate need for this feature as well!

[black-eye]

^^^ Hooha, looks promising...! 👍 ^^^

[black-eye]

Is this issue really closing now?
As far as I know, in version 2.1.0 there's only the ability to change the breakpoint pixel value, not to add a new one as requested here by many.

And as @bainternet wrote on #4861, there are still plans for implementing this:

I agree about the misleading announcement message which will be corrected and should have been along the lines of: "Set Elementor breakpoints". As for adding custom new ones, we made this as a first change in order to allow adding new custom break points in the future.

So IMHO, this issue should stay opened until this feature isn't fully implemented. Sure, we can open a new issue, but for the sake of simplicity and continuity it would be better to keep this one.

[stratboy]

As far as the number of breakpoints available is at least 5, along with the ability to change their values, I think we all can be happy and thanks the Dev team.

[EdenK]

The Nav Menu element breakpoint is not working with the elementor->settings->style breakpoint.

[snostorms]

Not working on the nav menu for me either

[Haim6130]

Also here, not working on nav menu.

[bainternet]

@EdenK @snostorms @Haim6130
Please test with Elementor Pro 2.1 beta #4923

[gmjelle]

Is there any update on it? Can we write a custom media query to overwrite when the mobile navbar is shown?

[shaneonabike]

Just a note that for those people changing the media query after they have created pages they must regenerate the CSS files. This can be done in the Tools section and then everything works beautifully

[AndersJpg]

Yeah we really need to be able to add new media queries. not to change the 3 that's already there.
The extra time i am using to test it on different real phones and tablets, in landscape and so on, is killing the smooth workflow so much.

please make so that us that needs it can wing it off in the settings. Because i understand you want to make it simple and easy for a lot of users but there is just us that needs those extra features.

[TomRaraAvis]

+1

[JumaDM]

+1

[laratuk]

I was very tired about this issue. I finally found workarounds using this great addon https://pafe.piotnet.com/. There are lots of great features other than Custom Media Query Breakpoints

[michaelnorthern]

Yes, the custom breakpoints and previews for those breakpoints are weak in Elementor. My take is that the developers are more interested in additional features, especially if they involve design, rather than refining existing functionality. Hoping Elementor doesn't become bloated like so many others, that would be a huge mistake.

…

On Mon, Jan 21, 2019 at 10:19 PM bodhi1970 ***@***.***> wrote: I am wondering why the developers are so against it and are not implementing it even there are already great solutions out there? > On 22.01.2019, at 03:57, laratuk ***@***.***> wrote: > > I was very tired about this issue. I finally found workarounds using this great addon https://pafe.piotnet.com/. There are lots of great features other than Custom Media Query Breakpoints > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub, or mute the thread. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#78 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFysIhQ4yxGKoO8n24abV6xAqVWI3U2Bks5vFq1dgaJpZM4I1s77> .

[ddenev]

@michaelnorthern , yes unfortunately Elementor is becoming bloated. They implement half-baked features and then leave them without polishing only to be able to state that they have that feature. This trend has been going very long time. I was banned from the FB group for critiquing them for their focus on marketing/selling more than on fixing important issues and improving the core.
And now with competition like Brizzy and Oxygen they will have more and more abandonment. Check this out - http://pagepipe.com/how-elementor-page-builder-affects-mobile-page-speed/

[michaelnorthern]

I guess we'll see. I have a speed optimization service, Elementor is not a problem right now, hopefully the team will provide options or smart implementation to limit bloat. Don't agree with the post that Gutenberg will drive Page Builders out of business.

…

On Sat, Feb 2, 2019, 12:10 PM drank ***@***.*** wrote: @michaelnorthern <https://github.com/michaelnorthern> , yes unfortunately Elementor is becoming bloated. They implement half-baked features and then leave them without polishing only to be able to state that they have that feature. This trend has been going very long time. I was banned from the FB group for critiquing them for their focus on marketing/selling more than on fixing important issues and improving the core. And now with competition like Brizzy and Oxygen they will have more and more abandonment. Check this out - http://pagepipe.com/how-elementor-page-builder-affects-mobile-page-speed/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#78 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFysIkszt3z1cWQpGNSSzNR5zS7622rIks5vJfCzgaJpZM4I1s77> .

[stratboy]

@Haim6130 I already gave them a lot of time and suggestions, and some money too, and patience, as a lot of people here. And after 20 years of web design and web development, I still end up preferring not to use it.

As for the speed: I definitely didn't say sites are heavy. I was not speaking of speed loading, I was speaking of rendering performance in cases where repaints are critical.

Anyway, no prob.

[michaelnorthern]

@Haim6130 I agree Elementor is the best builder on the market, I'm just cautioning the Elementor folks to not fall for the every-feature-in-the-universe trap, unless there's an explicit way to turn those features OFF if not needed. I use Elementor in combination of good VPS hosting, caching, minimization, and GeneratePress — sites are plenty fast, typically load in about 1 second. Conversely, Gutenberg feels like clunky garbage to me. If Automattic hadn't forced it on WordPress users, would anybody bother with it? I don't think so. After 30 minutes of testing, I found a plugin to disable it. Goodbye Gutenberg.

…

On Mon, Feb 4, 2019 at 8:40 AM Luca Reghellin ***@***.***> wrote: @Haim6130 <https://github.com/Haim6130> I already gave them a lot of time and suggestions, and some money too, and patience, as lot of people here. And after 20 years of web design and web development, I still end up preferring not to use it. As for the speed: I definitely didn't say sites are heavy. I was not speaking of speed loading, I was speaking of rendering performance in cases where repaints are critical. Anyway, no prob. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#78 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFysIiaydDZNsgGHk-ZyiuTMpWNxnCh-ks5vKGJlgaJpZM4I1s77> .

[pixelbart]

+1

[ogio]

+1 Is it possible still no update from Jan 2016? :(

[Quoteboss]

Breakpoints are limited. With the increase in pixel density on tablets I am getting a staggered layout on my tablet view for the webiste when it should divert to the mobile style view. I have tried updating the tablet breakpoint to 1625 (5px over the ipad portrait pixel width) but it wont let me go that high.. I can only set it to 1435is (whatever it was).

Please extend max breakpoint width or can you give us any CSS to patch so I can customise?

I'd prefer doing it this way than making a totally mobile version with hidden fields to save on page load time.