Raise your hands if you love the notch on iPhone X, XS, XR or XS Max! 🙋🏻‍♀️🙋‍♂️

Okay, not many hands went up there, but I'm sure as a developer you do love some extra "real estate" on your screen to be able to make use of. A beautiful edge-to-edge display—well, almost—makes the notch at the top of the bezel less of an eyesore for most people.

In fact, it's not even an issue for most websites in portrait mode.

Landscape viewing is where the notch pokes in the eye.

Take a look at dev.to for example:

I'm not sure if you can see in the image clearly but the header ends abruptly both on left and right hand side, leaving behind a feeling of a bug in the layout. This is truer and worse on Youtube.com:

Terrible.

The issue feels particularly bad on Youtube because I normally watch videos in landscape mode and after every video I get to see this glaring bug with blood red color all over it. 🤢

It's important to note here that all of the websites discussed above do have their header width set to 100% in their layout. So there is an understood expectation for the header to occupy full width of the screen. But that's not the case however. It's just that browsers like Safari and even Chrome v69 on iOS introduce these white bars by adding a little bit of extra margin to your page so that the content isn’t obscured by the notch.

They call it safe area margins.

Enter viewport-fit meta tag and CSS environment variables.

Here's a simple fix to use all the extra space. To tell the browser to expand into the display cutout (notched) area, set the viewport-fit property to cover like so:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

That should do the trick, especially for the sticky header on top. If you want to use the entire screen area but at the same time avoid content going under the notch, use css environment variables like so:

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Basically there are four CSS rule options to handle 
   the notch from all four sides of the iPhone. I don't 
   recommend using them though!

padding: env(safe-area-inset-top) 
         env(safe-area-inset-right) 
         env(safe-area-inset-bottom) 
         env(safe-area-inset-left);

*/

Another approach to solving left and right padding on the body of content correctly is to simply use width definitions per @media-query, like so:

@media only screen and (orientation: portrait) {
    body {
        .shrink {
            width: 95%;        
        }
    }
}

@media only screen and (orientation: landscape) {
    body {
        .shrink {
            width: 90%;      // Shrink a little extra to avoid the notch.
        }
    }
}


.center {
    text-align: center;
    margin: 0 auto;
}

And then in your HTML, the main container element can sit with css classes shrink center to work across all devices and all viewports with just one rule definition. I prefer doing it this way to avoid using device specific hacks like safe-area-insets.

<header>
    <!--Sticky header with 100% width across and above the notch -->
<header>
<main class="shrink center">
    <!-- Body goes here -->
</main>
<footer>
    <!-- Full screen width under the notch -->
</footer>

That's how Bubblin Superbooks scales from Apple Watch to the iPad to desktop all the way up to television sets. 🎩

There are some other fancy solutions around the notch out there using JavaScript but it's really not recommended. Overkill. Less code means better maintainability. And similarly, less CSS => more scalability.

That's all for now folks. Stay cool. ❤️

Follow me on Twitter or on Github.

This post originally appeared on The Bubblin Blog