CSS Foldable Display Polyfill

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Foldable phones are starting to be a thing. Early days, for sure, but some are already shipping, and they definitely have web browsers on them. Stands to reason that, as web designers, we are going to want to know where that fold is so we can design screens that fit onto the top half and bottom half… or left half and right half¹.

Looks like that’s going to make its way to us in the form of env() constants, just like all that notch stuff.

The code block in the polyfill repo is:

@media (spanning: single-fold-vertical) {
  body {
    flex-direction: row;
  .map {
    flex: 1 1 env(fold-left)
  .locations-list {
    flex: 1;

I would also think it could be…

@media (spanning: single-fold-vertical) {
  .page-wrap {
    display: grid;
    grid-template-columns: env(fold-left) 1fr;

Interesting how there is no fold-right, isn’t it? And aren’t we trying to stay away from directional terms like that and use logical properties? Why not fold-inline-start?

  1. It’ll be interesting to see how that sentence ages. Just watch the first really popular foldable phone will have three segments.