Set Custom Media Query Breakpoints

[abaney]

It would be great if one could set custom media query breakpoints from the WP admin. Thanks!

[lukecav]

That would be a cool feature.

[peepshow]

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

[wilthil]

+1

[lunacroft]

👍

[arielk]

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

[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!

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

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

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

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

[stratboy]

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

[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%
	}
}

[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 :)

[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]

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

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

[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! :)

[nicolasblume]

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

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

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

[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

[artneo-io]

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…

[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

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

[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]

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.

[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 :)

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

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

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

[Sataptech]

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