Visibility

Now with superpowers

Hide an element

There are three classes available to hide an element, always depending on the case.

.d-n: Adds a "display:none !important" to the element, so it never will be visible.
.hidden: Adds a "display:none" to the element. Very useful to elements that javascript may force to show.
.out-of-viewport: Move the element outside of the viewport (it remains visible but out of the screen). This is very useful for example to hide charts or other elements that should be visible to a correct rendering.

No elements visible? Check the code tab!

I'm only visible on desktop devices

<p>No elements visible? Check the code tab!</p>

<!-- D-N -->
<div class="d-n">
    <p>I'm only visible on desktop devices</p>
</div>

<!-- HIDDEN -->
<div class="hidden">
    <p>I'm only visible on desktop devices</p>
</div>

<!-- OUT OF VIEWPORT -->
<div class="out-of-viewport">
    <p>I'm only visible on desktop devices</p>
</div>

Show elements only on some devices

I'm only visible on desktop devices

I'm only visible on tablet devices

I'm only visible on mobile devices

<!-- DESKTOP -->
<div class="desktop">
    <p>I'm only visible on desktop devices</p>
</div>

<!-- TABLET -->
<div class="tablet">
    <p>I'm only visible on tablet devices</p>
</div>

<!-- MOBILE -->
<div class="mobile">
    <p>I'm only visible on mobile devices</p>
</div>

Show elements only on some screens

I'm only visible on screens XXXL

I'm only visible on screens XXL

I'm only visible on screens XL

I'm only visible on screens L

I'm only visible on screens M

I'm only visible on screens S

I'm only visible on screens XS

<!-- SCREEN XXXL -->
<div class="screen-xxxl">
    <p>I'm only visible on screens XXXL</p>
</div>

<!-- SCREEN XXL -->
<div class="screen-xxl">
    <p>I'm only visible on screens XXL</p>
</div>

<!-- SCREEN XL -->
<div class="screen-xl">
    <p>I'm only visible on screens XL</p>
</div>

<!-- SCREEN L -->
<div class="screen-l">
    <p>I'm only visible on screens L</p>
</div>

<!-- SCREEN M -->
<div class="screen-m">
    <p>I'm only visible on screens M</p>
</div>

<!-- SCREEN S -->
<div class="screen-s">
    <p>I'm only visible on screens S</p>
</div>

<!-- SCREEN XS -->
<div class="screen-xs">
    <p>I'm only visible on screens XS</p>
</div>