CSS reference - Bifrost

Device notch

Responsive sites and notch (a.k.a. busslomme)

A lot of mobile devices has a notch in the screen, and will by default add padding to make sure the notch does not obscure any content. This usually results in an undesirable gray bar on the sides of your web app. In order to stretch your web app to full width include this meta tag in the head of your index.html:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

When using the Bifrost <Nav> component, a padding is added to the main content (on devices with a notch) to make sure content is not obscured, but the top nav should now be full screen width.

Full-width content on devices with notch

If you want (any part of) your main content to take up full width even on devices with a notch (like a banner with a background color) you can use .bf-negative-notch on your page container (do not use directly on <Nav>), and then re-add padding inside of it with .bf-notch:

<div class="bf-negative-notch">
  <div class="bf-notch bfc-warning-bg">
    Content here is safe from notch, but its background will still stretch to
    full screen width
  </div>
  <div class="bf-notch">Rest of your page can be here, in safe padded area</div>
  <div>Content here can be obscured by a notch (oops! don't do this)</div>
</div>
<div class="bf-negative-notch">
  <div class="bf-notch bfc-warning-bg">
    Content here is safe from notch, but its background will still stretch to
    full screen width
  </div>
  <div class="bf-notch">Rest of your page can be here, in safe padded area</div>
  <div>Content here can be obscured by a notch (oops! don't do this)</div>
</div>

Avoid using on elements with custom margin/padding