Take your web development skills a notch higher
Tags: webdev, development, mobile, beginners
Published: 2018-09-13 18:50:53

---
title: Take your web development skills a notch higher
published: true
description: Handling notch on new iPhones and Google Pixel 3 on your website.
tags: webdev, development, mobile, beginners
---

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



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. 

![notch on dev.to][portrait]

Landscape viewing is where the notch pokes in the eye. 

Take a look at dev.to for example:


![gutters on dev.to][safe]

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:

![gutters on dev.to][youtube]

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](https://developers.google.com/web/updates/2018/09/nic69#notch) 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:

```html
<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:

```css

.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:  

```css

@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`.

```html
<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](https://bubblin.io) 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. 

![bubblin in landscape mode][bubblin]

![superbook in landscape mode][superbook]



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


---

Follow me on [Twitter](https://twitter.com/marvindanig) or on [Github](https://github.com/marvindanig).

This post originally appeared on [The Bubblin Blog](https://bubblin.io/blog/notch)

[notch]: https://thepracticaldev.s3.amazonaws.com/i/b08q03geomlfmbcgzfog.png "Notched iPhones are in!"

[portrait]: https://thepracticaldev.s3.amazonaws.com/i/jep9r6fa1nsc0wkoyply.png "Notch on Dev.to in portrait!"

[safe]: https://thepracticaldev.s3.amazonaws.com/i/kgvldw20kmmcryhzop76.png "default gutters on dev.to"

[youtube]: https://thepracticaldev.s3.amazonaws.com/i/9ys5giyib03mu9vkafea.png "default gutters on youtube.com"

[bubblin]: https://thepracticaldev.s3.amazonaws.com/i/pqksv766pnuwd3csyb4s.png "bubblin superbooks"

[superbook]: https://thepracticaldev.s3.amazonaws.com/i/4wo5tvmrk9o5k5dxwtln.png "superbook landscape"