hidden

...

There are 2 hidden utilities,

- the first one is hidden-width, it will hide an element when this element reach a specific width.

- the second one is hidden-screen, it will hide an element at a specific screen width.

An important thing to note: in the two cases, the value from the attribute is a range of width.

For example if you want to hide an element when its width is between 250px and 500px you will use `hidden-width="250px:500px"`.

If you want to hide it when its width is smaller than 600px you will use `hidden-width=":600px"`, (it means from 0px to 600px).

If you want to hide it when its width is bigger than 600px you will use `hidden-width="600px:"`, (it means from 600px to infinite).

Examples

The hidden width utility let you hide the element depending of it's own width.

If you give to an element hidden-width=":200px" the element will hide when it's smaller then 200px.

If you give it hidden-width="100px:300px" the element will hide when its width is between 100 and 300px.

In this example, if the div has a width smaller than 400px it will be hidden.

I'm visible

The hidden-screen utility, hides the element you give it too, depending on the screen size, just like a normal media querie.

This can be helpful with elements contained in a wrapping component, because while the screen get smaller, when its parent wrap, the element gets bigger.

In this example, if the div has a width smaller than 800px it will be hidden.

I'm visible