Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set Custom Media Query Breakpoints #78

Closed
abaney opened this issue Jun 14, 2016 · 91 comments

Comments

@abaney
Copy link

commented Jun 14, 2016

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

@lukecav

This comment has been minimized.

Copy link

commented Jun 16, 2016

That would be a cool feature.

@peepshow

This comment has been minimized.

Copy link

commented Aug 11, 2016

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

@arielk arielk modified the milestone: 0.8 Aug 16, 2016
@wilthil

This comment has been minimized.

Copy link

commented Aug 17, 2016

+1

1 similar comment
@lunacroft

This comment has been minimized.

Copy link

commented Aug 20, 2016

👍

@arielk

This comment has been minimized.

Copy link
Contributor

commented Sep 2, 2016

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

@arielk arielk removed this from the 0.8.0 milestone Sep 5, 2016
@hybridvision

This comment has been minimized.

Copy link

commented Sep 16, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2016

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

This comment has been minimized.

Copy link

commented Sep 18, 2016

@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

This comment has been minimized.

Copy link

commented Sep 26, 2016

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

This comment has been minimized.

Copy link

commented Mar 3, 2017

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 comment has been minimized.

Copy link
Contributor

commented Jul 10, 2017

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

@carasmo

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2017

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

This comment has been minimized.

Copy link

commented Jul 20, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jul 20, 2017

@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

This comment has been minimized.

Copy link

commented Jul 29, 2017

@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

This comment has been minimized.

Copy link

commented Aug 20, 2017

+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

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2017

@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

This comment has been minimized.

Copy link

commented Aug 21, 2017

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

@black-eye

This comment has been minimized.

Copy link

commented May 18, 2018

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

@black-eye

This comment has been minimized.

Copy link

commented Jul 3, 2018

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.

@drank

This comment has been minimized.

Copy link

commented Jul 3, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 3, 2018

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

This comment has been minimized.

Copy link

commented Jul 5, 2018

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

@snostorms

This comment has been minimized.

Copy link

commented Jul 11, 2018

Not working on the nav menu for me either

@Haim6130

This comment has been minimized.

Copy link

commented Jul 17, 2018

Also here, not working on nav menu.

@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Jul 17, 2018

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

@jellevdvliet

This comment has been minimized.

Copy link

commented Sep 12, 2018

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

@shaneonabike

This comment has been minimized.

Copy link

commented Nov 14, 2018

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

This comment has been minimized.

Copy link

commented Dec 17, 2018

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

This comment has been minimized.

Copy link

commented Dec 22, 2018

+1

@elementor elementor deleted a comment from hufer Dec 26, 2018
@JumaDM

This comment has been minimized.

Copy link

commented Jan 7, 2019

+1

@artneo7

This comment has been minimized.

Copy link

commented Jan 18, 2019

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

This comment has been minimized.

Copy link

commented Jan 22, 2019

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

This comment has been minimized.

Copy link

commented Jan 22, 2019

@michaelnorthern

This comment has been minimized.

Copy link

commented Jan 22, 2019

@drank

This comment has been minimized.

Copy link

commented Feb 2, 2019

@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

This comment has been minimized.

Copy link

commented Feb 2, 2019

@stratboy

This comment has been minimized.

Copy link
Contributor

commented Feb 3, 2019

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

This comment has been minimized.

Copy link

commented Feb 4, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2019

@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

This comment has been minimized.

Copy link

commented Feb 4, 2019

@dasigna

This comment has been minimized.

Copy link

commented Feb 4, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.