https:/
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?
While we wait for browsers to implement the text-wrap: balance; #CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:
https://codepen.io/nhoizey/pen/mdjbrVx
Tell me what you think!
But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅
The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how…
TIL @media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.
Safari requires a media type, like all.
So here's the "right" syntax:
@media not all and (min-width: 60rem) { … }
I started updating my photography site with new Media Queries and CSS environment variables to make sure Surface Duo owners enjoy it even more! 🎉
Other foldable devices will come if it makes sense.
You have a Surface Duo? Feedback is welcome! 🙏
Nils Binder 
Donnie D'Amato