Responsive typography, spacing, and visibility
Responsive design is not limited to column counts. Adjust type size, padding, alignment, and visibility to match the content's needs. For example, a page heading might use text-2xl sm:text-3xl lg:text-5xl; a navigation label may be hidden on very narrow screens while an accessible icon button remains available.
Use hidden carefully: it removes an element from layout and generally from the accessibility tree. If an item must remain available to screen readers, use an appropriate visually-hidden technique rather than hidden.
Responsive hero
<section class="px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
<div class="mx-auto max-w-4xl text-center">
<p class="text-sm font-semibold text-blue-700">Plan with confidence</p>
<h1 class="mt-3 text-3xl font-bold tracking-tight sm:text-4xl lg:text-6xl">A better view of your work</h1>
<p class="mx-auto mt-4 max-w-2xl text-base leading-7 text-slate-600 sm:text-lg">
Turn busy task lists into a clear plan your whole team can follow.
</p>
<div class="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
<a href="#start" class="rounded-lg bg-blue-600 px-5 py-3 font-semibold text-white">Get started</a>
<a href="#learn" class="rounded-lg border px-5 py-3 font-semibold">Learn more</a>
</div>
</div>
</section>đź’ˇ Spacing and type scale together across viewport sizes. The actions stack vertically on narrow screens and align horizontally when enough space is available.
Key Takeaways
- Responsive prefixes are minimum-width conditions.
- Adjust spacing and typography as well as layout columns.
- Do not hide essential actions without providing an accessible alternative.