Show and hide content per breakpoint without writing custom media queries: show-for-small-only, hide-for-medium, show-for-large, and similar classes toggle display at Foundation’s breakpoints.
Practical usage
- Mobile-only nav toggle label vs desktop horizontal menu
- Supplementary sidebar promo visible only on
largescreens - Print helpers:
show-for-print,hide-for-print
Prefer restructuring with the XY grid when possible—visibility helpers are for deliberate device-specific chrome, not fixing layout mistakes.
Important interview questions and answers
- Q: show-for-medium-only vs hide-for-small?
A:-onlyvariants limit visibility to a single breakpoint band; non-only classes often mean “from this size up” or “down”—check Foundation docs for the exact media query each class maps to. - Q: Accessibility concern with hidden content?
A: Screen readers may still access off-screen markup; usearia-hiddenand thoughtful DOM order, not only display:none helpers.
Self-check
- Which class hides an element on medium viewports but shows it on small?
- When should you fix layout with cells instead of hide/show classes?