Nils Binder talks about a technique for spacing between two elements. Picture a header on a large screen with a logo in the upper left and nav in the upper right. Then a small screen, when they can no longer be on the same “row” and need to wrap, they don’t just wrap but are centered.
A video explains better:
My mind goes: I’d just find the exact pixel value for the breakpoint I want this to happen and then write a media query that re-styles things to do that.
But… media queries are only for the entire browser window width. While that probably works in a case like this because it’s a full-site kinda concern, I get the desire to not have to write media queries. Nils’ idea borrow concepts from Heydon’s Holy Albatross to make this work without any media queries at all. So, you could use this on a smaller-scope component where you need to adjust the breaking point at a certain size that has nothing to do with the size of the browser window.
Direct Link to Article — Permalink
The post The Devil’s Albatross appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
source https://9elements.com/blog/the-devils-albatros-an-algorithmic-layout-technique/
No comments:
Post a Comment