Responsive code block

Narrow the viewport: the sample keeps readable type and scrolls the long import line instead of breaking layout.

config/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({ plugins: [react()], server: { port: 5173 } });

Widely Supported

typographyoverflowno-js

Quick implementation

.responsive-code-demo { width: min(42rem, 100%); margin-inline: auto; }
.responsive-code-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 0.85rem 1rem;
}
.responsive-code-card__pre {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--card) 88%, var(--fg));
  border: 1px solid var(--card-border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(0.72rem, 1.6vw + 0.55rem, 0.88rem);
  line-height: 1.5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-code-card__pre code { font: inherit; color: var(--fg); white-space: pre; }

Prompt this to your LLM

Styling code samples in docs and blog posts.

You are implementing a responsive code well for documentation.

Goal: A card with a filename label and a <pre><code> block that never overflows the viewport width awkwardly.

Constraints:
- Use overflow-x: auto on the pre; touch-friendly momentum on iOS.
- Scale monospace font-size with clamp() between ~0.72rem and ~0.88rem.
- Keep line-height around 1.5; code should use white-space: pre (not pre-wrap for this sample).

Return HTML + CSS using design tokens like var(--card-border).

Why this matters in 2026

Readers hit docs on phones first; horizontal scroll plus fluid type beats tiny illegible monospace or broken layouts.

The logic

clamp() ties font size to viewport; overflow-x: auto contains long tokens. Together they avoid both overflow and unreadable micro-type.

Accessibility & performance

Prefer real pre/code for screen readers; avoid animating scroll position. No JavaScript required.