2

I'm using http://tachyons.io/ and have a icon. I want to display that icon only on small devices but when its landscape mode to also display on small devices. Since the screen size for portrait is less than 480px but if I rotate, its more than 480px in landscape mode which makes it "medium" size as per Tachyons.

How can I handle this situation?

My scenario example: display icon on small devices only, hide icon on medium and large devices, on landscape mode - show icon on small devices or set a range of width acceptable to be shown.

<div className="dn-ns"> this means display none on everything but small devices.

dtolnay
  • 9,621
  • 5
  • 41
  • 62
fscore
  • 2,567
  • 7
  • 40
  • 74

1 Answers1

3

Sounds like you should use "dn-l" since you only want to hide it on large screens. Small and medium screens should display it.

<div class="dn-l"></div>

Hope this helps!

For what it's worth, I believe "class" is preferred for HTML property definition.

"className" is used in JSX for several reasons and useful for manipulating the DOM with other languages (like JS).

classList[.add() .toggle(), .remove()] also become super useful with tachyons!

document.getElementById('element-id').className = ''
document.getElementById('element-id').classList.add('' [,])

Reference: MDN className MDN classList

Wesley Robinson
  • 131
  • 6