Is there a Replacement for table-show class in Calcite?

[ArianaBernal]

We have a live application which was utilizing the .tablet-show, .tablet-hide classes which I believe were part of Calcite-Web which is now deprecated. This has made my application no longer mobile friendly and I am not finding this functionality on the calcite components in the rest of the documentation. I tried updating to different versions of the SDK and Design System,and that did not help.

Here is the live site to see the issue.

Do you all have a similar function class or a recommendation to correct this? I hid mobile on our live site, but here is a git-hub page showing the bug.

[Mac_And_Cheese · Accepted solution]

Hi @ArianaBernal - at this time, there are no utility classes in Calcite Design System to replace that functionality from Calcite Web.

However, it is easy to replicate this behavior on your own with Media Queries (MDN reference). Using this technique, you can customize your app as needed.

To replace the Calcite Web .tablet-show class, you could do something like this in css:

.show-on-small-viewports {
  display: none;
}

@media (max-width: 860px) {
  .show-on-large-viewports {
    display: none;
  }

  .show-on-small-viewports {
    display: block;
  }
}

Example in Codepen  

[ArianaBernal]

Perfect, thank you so much!