Hiding and fixing elements
TL;DR
The hide composable class hides elements. The fixed composable class fixes them to the page.
They both just work everywhere until you use one of the breakpoint composable classes with it: mobile, tablet or desktop.
mobile: the behavior happens only on the smallest viewport.
tablet: the behavior happens on mid-size viewports and up.
desktop: the behavior happens on the biggest sized viewports (and up).
Both mobile and tablet also compose with each other to trigger the behavior on mide-sized viewports and down.
The nitty-gritty
For a visual, here's how hide and fixed behavior appears on the three different resolutions:
On mobile:
On tablet:
On desktop:
Here's hide mobile:
On mobile:
On tablet:
On desktop:
The mobile and tablet composables compose with each other:
On mobile:
On tablet:
On desktop:
Here's hide tablet:
On mobile:
On tablet:
On desktop:
Finally, here's hide desktop:
On mobile:
On tablet:
On desktop:
For a composable like hide that doesn't compose with responsive classes, try .hidden.