{"id":334288,"date":"2021-02-12T07:54:05","date_gmt":"2021-02-12T15:54:05","guid":{"rendered":"https:\/\/css-tricks.com\/?p=334288"},"modified":"2021-02-12T07:54:08","modified_gmt":"2021-02-12T15:54:08","slug":"the-devils-albatross","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-devils-albatross\/","title":{"rendered":"The Devil’s Albatross"},"content":{"rendered":"\n

Nils Binder talks about<\/a> 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<\/em>. <\/p>\n\n\n\n\n\n\n\n

A video explains better:<\/p>\n\n\n\n

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<\/em> have to write media queries. Nils’ idea borrow concepts from Heydon’s Holy Albatross<\/a> 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. <\/p>\n\n\n\n