Allow custom breakpoints

[abaicus]

Description:

Allow the user to set custom responsive breakpoints. This can be achieved easily right now using CSS variables.

Alternatives:

Don't allow custom breakpoints definition.

[cristian-ungureanu]

This is the most voted request on Nolt, I think we should implement it.

[abaicus]

@cristian-ungureanu media queries don't support custom properties. This is a thing that I wasn't aware of when I posted this.

A workaround would be to rewrite the CSS on the user's website each time these change, but I doubt it's worth the hassle.

https://www.w3.org/TR/css-variables-1/#using-variables

[cristian-ungureanu]

Starting from this article I got to this plugin.

@abaicus maybe you can have a look over this, maybe we could use it. 🤔

[abaicus]

@cristian-ungureanu

@custom-media directives are in the draft spec for now here 🔗.

PostCSS is a dev tool that runs during the build phase and transforms CSS using JS. The postcss-custom-media plugin does just that. It can be useful in the same way we use SCSS variables 🔗 to not constantly repeat the same numbers and potentially get them wrong between usages.

Here is a CodePen 🔗 that showcases what happens when custom media queries get passed through PostCSS and the postcss-custom-media plugin.

[stefan-cotitosu]

+1 https://wordpress.org/support/topic/neve-how-to-change-breakpoint/

[rodica-andronache]

In this case, from what I’ve seen in tickets across time, the main thing that people want is to control the header ( especially the menu/menu icon ) on tablets, or on larger phones. Right now, on tablet you get the header you set up for mobile (the menu icon), even though there should be space to have the full menu.