Published October 16, 2026
I was resizing a browser window last month, watching the computed font-size in DevTools, and nothing moved for what felt like a long drag. Not stuck, exactly. The clamp() was working. It was just pinned at its minimum across every viewport I actually owned, and the fluid middle existed in a 167-pixel window of screen widths that nobody I knew had. That is a surprisingly common condition for a "fluid" value to be in, and you can diagnose it with two divisions.
The two crossovers
Every clamp(MIN, preferred, MAX) has two crossover viewports: the width where the preferred value equals the MIN, and the width where it equals the MAX. Below the first, you get the min. Above the second, the max. The scaling everyone pictures when they write clamp() only happens between those two lines. If the distance between them is small, or they sit outside the viewports your visitors use, the function is effectively a fixed value wearing a costume.
For a preferred value of a vw + b px (after converting any rem offsets to px at your root size), the crossovers are:
crossover for MIN = (MIN px - b) / a x 100
crossover for MAX = (MAX px - b) / a x 100Three snippets, measured
Take the body-text snippet you have probably copy-pasted: clamp(1rem, 1.2vw, 1.125rem). At a 16px root, that is min 16px, max 18px, no rem offset in the middle. The min crossover is 16 / 1.2 x 100 = about 1333px. The max crossover is 18 / 1.2 x 100 = 1500px. So on every phone, every tablet, and every laptop narrower than 1333px, this renders exactly 16px. It scales between 1333 and 1500px, a band almost no consumer device lands in, and pins at 18px past that. Nothing is broken. The author just built a fixed 16px with a bonus two pixels for ultrawide monitors.
Now a heading clamp from a recent SitePoint piece: clamp(2rem, 1.25rem + 2.5vw, 3.5rem). Min 32px, max 56px, and the preferred value carries a 20px rem offset. Min crossover: (32 - 20) / 2.5 x 100 = 480px. Max crossover: (56 - 20) / 2.5 x 100 = 1440px. The fluid window runs from small phones to large laptops, which is what the author wanted: real scaling across the devices real people use. The rem offset is doing the quiet work here. It lifts the floor so the slope does not have to be steep to reach the min in a sensible place.
The third one pins at the top instead of the bottom: clamp(16px, 5vw, 34px). Max crossover: 34 / 5 x 100 = 680px. So every tablet and every desktop pins at 34px; only phones below 680px see any scaling. A slope too shallow pins the bottom, a slope too steep pins the top, and in both cases the clamp is "working" in the precise sense that it is doing exactly what you wrote.
Run the crossovers before you commit
Remember that DevTools window I was dragging at the top? It was the first snippet, the 1rem one, on a site I had shipped myself. The min I had carefully chosen for mobile readability turned out to be the value on every device, and the fluid range I had imagined was a rounding error. The fix was not complicated: I bumped the vw coefficient and added a small rem offset until the crossovers sat at 420px and 1280px, inside the traffic I actually get. But I only found the problem because I did the division instead of trusting the shape of the code.
The calculator on this site exists so you do not have to do this by hand. You give it the size you want at your small and large breakpoints and it builds the clamp() so the crossovers land where you aimed. If you are writing clamp() by hand, two divisions on a phone calculator will tell you more than an hour of resizing windows. Fluid type is a contract with specific viewport widths, and the crossovers are the fine print.
Frequently asked questions
How do I find the viewport widths where my clamp() switches between min, fluid, and max?
Solve for the viewport where the preferred value equals the min, then where it equals the max: crossover viewport = (bound minus any rem offset) divided by the vw coefficient, times 100. Below the first crossover you get the min, above the second you get the max, and only between them does anything scale.
Why does my clamp() stay at the minimum on desktop?
Your vw slope is too gentle. With clamp(1rem, 1.2vw, 1.125rem), the preferred term only exceeds 16px at viewports wider than about 1333px, so every common laptop and tablet pins at the 16px minimum. Raise the vw coefficient or add a rem offset so the preferred value crosses the min inside your real viewport range.
Can a clamp() be pinned at the max on small screens too?
Yes. With clamp(16px, 5vw, 34px), the preferred term hits 34px at just 680px of viewport width, so tablets and desktops all render the max. A slope too shallow pins the bottom; a slope too steep pins the top.
Does the clamp() calculator on this site show the crossover points?
Yes. Enter the size you want at your small and large breakpoints and it generates the clamp() line, so the crossovers land where you intended. If you type a clamp() by hand, run the two divisions yourself as a sanity check.
Get the clamp() math right the first time.