Intermediatenote 02 of 1703 reasons · 03 notes
CSSIntermediate
Use clamp for fluid spacing
Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.
Code example
Copy, adapt, and ship.
Read the numbered lines, copy the complete snippet, then adjust the values for your project.
.hero { padding-block: clamp(4rem, 8vw, 8rem);} .hero-title { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.92;}Why this matters
The production reason.
- 01
Fixed spacing often feels cramped on mobile and oversized on desktop. clamp gives you a minimum, a preferred fluid value, and a maximum.
- 02
Use it for section padding, hero headings, and gaps where the space should breathe with the viewport.
- 03
Keep the bounds intentional so the design does not balloon on very large screens.
How it holds up outside a demo.
- TailwindUse arbitrary values like py-[clamp(4rem,8vw,8rem)].
- WebflowAdd clamp values in custom CSS for hero and section wrappers.
- WordPress themesUse clamp in theme.json custom properties for consistent spacing.
Explore other stacks
Jump into a different technology.
17 CSS notes on this shelf, and six more stacks beside it.
Use next/image for image optimization
Next.js image optimization starts with next/image sizing, lazy loading, modern formats, and predictable dimensions.
Open the noteKeep state close to the interaction
Local state avoids unnecessary parent renders and keeps component intent obvious.
Open the noteAbort stale fetch requests
Cancel outdated browser requests so fast UI changes do not render old data.
Open the noteFix WordPress H1 SEO issues
Fix WordPress SEO issues by keeping one clear H1, escaping template output, and compressing images before WordPress upload.
Open the noteReduce LCP with image optimization
Reduce LCP with image optimization by resizing, converting, and compressing images before they reach production.
Open the noteUse real buttons for actions
If it changes state, use button. If it navigates, use a link.
Open the note