Hide Based on Size
One way to make your application fit on a smaller screen is by hiding parts of the user interface on the smaller screen. In this case, because the smallest screen behavior is hidden, the unmodified property is hidden. At larger sizes, you might want the item to display, so you add in lg:block (or whatever breakpoint you want to start seeing the item at), winding up with class="hidden lg:block".
Sometimes you may want to go the other way and display an element at a smaller size but not at a larger one. It’s quite common to have an element for a hamburger menu replace a navigation bar on small size, but then disappear on a device that’s large enough to show all the navigation. In that case, the small-size behavior is to display, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access