freecoding.school100% FREE · NO SIGNUP
Neon DistrictISSUE #10 of 50

min() · max() · clamp() · responsive math

PrismaVSJank the Janitor
Prisma saysmin(), max(), and clamp() build responsive values with no media queries.

min(a, b) picks the smaller, max(a, b) the larger. clamp(min, preferred, max) combines both: a value that scales with the preferred (often a vw) but never crosses the bounds. font-size: clamp(1rem, 4vw, 2rem) is fluid type that stays readable.

Power-ups you unlock

Jank the Janitor attacks — common mistakes

Boss battleMake a heading fluid with clamp(1.5rem, 5vw, 3rem) and a container width min(90%, 800px).

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.wrap{width:min(90%,800px);margin:0 auto}h1{font-size:clamp(1.5rem,6vw,3rem);color:#b388ff}</style></head><body style="background:#06040d;padding:20px"><div class="wrap"><h1>fluid, bounded heading</h1></div></body></html>
▶ Open the interactive comic issue
‹ Calc() · Math In ValuesFilter · Blur · Brightness · Contrast ›