How do I override --ifm-narrow-window correctly. I tried in custom.css - didn't work

[artemkovalyov]

Can I override breakpoints? Especially --ifm-narrow-window?

I was not able to use custom.css for that. Override doesn't seem to apply

@custom-media --ifm-narrow-window (max-width: 2000px);

[slorber]

Unfortunately you can't easily do that without forking Infima

Infima distributes CSS as a standalone CSS file without non-standard features (such as using CSS vars in media queries).

And Docusaurus consumes that CSS file directly, so doing fancy PostCSS things with plugins such as https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media won't apply to the CSS file Docusaurus loads because CSS variables are already replaced.

Also: changing the breakpoint in CSS isn't enough, we also use this breakpoint value on the JS side and both need to stay in sync.

See also dedicated issue: facebook/docusaurus#9603