Responsive Text Block

This responsive text block adjusts font sizes and spacing for better readability across devices.

HTML

<div class="ss-text-block">
  <h2>Responsive Text</h2>
  <p>Text that adapts to screen size.</p>
</div>

<div class="ss-text-block">
  <h2>Responsive Text</h2>
  <p>Text that adapts to screen size.</p>
</div>

CSS

.ss-text-block h2{
  font-size:clamp(24px,5vw,36px);
}

.ss-text-block p{
  font-size:clamp(14px,4vw,18px);
}

.ss-text-block h2{
  font-size:clamp(24px,5vw,36px);
}

.ss-text-block p{
  font-size:clamp(14px,4vw,18px);
}

Notes

• Uses CSS clamp()
• Improves readability
• Mobile-first
• Modern CSS technique

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.