🏠 back to Observable

tachyons.css: where is the "small" display class?

In the spirit of this forum’s stated invitation to discuss “general discussion about data science, visualization, programming, and more”, a question on tachyons.css: where is the ‘small’ display class?

Under the docs for display, there are the following media query extensions:

     -ns = not-small
     -m  = medium
     -l  = large

… but ‘not small’ is, well… not small. So where is ‘small’?

I am trying to learn about showing and hiding <div> elements for different screen sizes. dn-m and dn-l allow me to hide elements for medium and large displays, respectively, but dn-ns will hide for everything but small. How do I hide elements for small displays?

Here’s a notebook showing these basic display classes in action:

Thanks in advance for any help and guidance!

You can invert the logic as dn db-ns, so it’s display: none by default, but then display: block on not small screens.

1 Like

Cool - and makes total sense. Thank you @mike!

1 Like