Clamp function in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a font size that clamps between 1rem and 3rem with a preferred size of 2vw.

CSS

font-size: clamp(1rem, [1], 3rem);

Drag options to blanks, or click blank then click option'

A50%

B20px

C2vw

D10em

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed units like px instead of relative units for the preferred size.

Putting the preferred size as the first or last value instead of the middle.

The clamp() function takes three values: minimum, preferred, and maximum. Here, 2vw is the preferred size between 1rem and 3rem.

2fill in blank

medium

Complete the code to clamp the width between 200px and 600px with a preferred size of 50%.

CSS

width: clamp(200px, [1], 600px);

Drag options to blanks, or click blank then click option'

A10rem

B100vw

C400px

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel values as the preferred size instead of relative units.

Mixing units incorrectly inside clamp().

The preferred size is 50%, which means half of the parent container's width, clamped between 200px and 600px.

3fill in blank

hard

Fix the error in the clamp function to correctly set margin between 10px and 50px with a preferred size of 5vw.

CSS

margin: clamp(10px, [1], 50px);

Drag options to blanks, or click blank then click option'

A5vh

B5vw

C5%

D5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using vh instead of vw for horizontal margin.

Using fixed units like rem or % which may not behave as expected.

The preferred size should be 5vw (viewport width units) to make margin responsive between 10px and 50px.

4fill in blank

hard

Fill both blanks to clamp padding between 1rem and 4rem with a preferred size of 3vw.

CSS

padding: clamp([1], [2], 4rem);

Drag options to blanks, or click blank then click option'

A1rem

B2rem

C3vw

D5vw

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping minimum and preferred values.

Using fixed units for preferred size.

The minimum padding is 1rem, the preferred size is 3vw, and the maximum is 4rem.

5fill in blank

hard

Fill all three blanks to clamp line-height between 1.2, 1.5, and 2 with a preferred size of 1.5.

CSS

line-height: clamp([1], [2], [3]);

Drag options to blanks, or click blank then click option'

A1.2

B1.5

C2

D1.8

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing the order of values.

Using values outside the allowed range.

The clamp sets line-height minimum to 1.2, preferred to 1.5, and maximum to 2 for good readability.

Practice

1. What does the CSS clamp() function do?

easy

A. It hides elements based on screen size.

B. It fixes a value to a single pixel size.

C. It creates a gradient color effect.

D. It sets a value that stays between a minimum and maximum, adjusting responsively.

Solution

1. Step 1: Understand the purpose of clamp()

   The clamp() function sets a value that can grow or shrink but never goes below a minimum or above a maximum.

2. Step 2: Compare options with clamp() behavior

   Only It sets a value that stays between a minimum and maximum, adjusting responsively. describes this behavior correctly; others describe unrelated CSS features.

3. Final Answer:

   It sets a value that stays between a minimum and maximum, adjusting responsively. -> Option D

4. Quick Check:

   Clamp controls value limits = A [OK]

Hint: Clamp limits values between min and max for responsive sizing [OK]

Common Mistakes:

• Thinking clamp fixes a value to one size
• Confusing clamp with color or visibility properties
• Assuming clamp only sets minimum or maximum, not both

2. Which of the following is the correct syntax for the CSS clamp function?

easy

A. clamp(min, preferred, max)

B. clamp(preferred, min, max)

C. clamp(max, min, preferred)

D. clamp(min, max, preferred)

Solution

1. Step 1: Recall clamp() parameter order

   The clamp() function takes three parameters: minimum value, preferred value, and maximum value, in that order.

2. Step 2: Match parameters to options

   Only clamp(min, preferred, max) follows the correct order: min, preferred, max.

3. Final Answer:

   clamp(min, preferred, max) -> Option A

4. Quick Check:

   Clamp syntax = min, preferred, max [OK]

Hint: Remember clamp(min, preferred, max) order [OK]

Common Mistakes:

• Swapping min and max values
• Putting preferred value first or last incorrectly
• Using clamp with only two parameters

3. What will be the computed font size in pixels for this CSS if the viewport width is 500px?

font-size: clamp(1rem, 2vw, 3rem);

Assume 1rem = 16px and 1vw = 1% of viewport width.

medium

A. 10px

B. 16px

C. 20px

D. 48px

Solution

1. Step 1: Calculate each clamp parameter in pixels

   Minimum: 1rem = 16px; Preferred: 2vw = 2% of 500px = 10px; Maximum: 3rem = 48px.

2. Step 2: Determine which value clamp chooses

   Clamp picks the preferred value (10px) but keeps it between min (16px) and max (48px). Since 10px is less than min, clamp returns 16px.

3. Final Answer:

   16px -> Option B

4. Quick Check:

   Clamp picks value between min and max = 16px [OK]

Hint: Clamp picks preferred but limits between min and max [OK]

Common Mistakes:

• Using preferred value directly without limits
• Confusing vw units with rem
• Ignoring min and max boundaries

4. Identify the error in this CSS using clamp:

width: clamp(300px, 50%, 200px);

medium

A. Minimum value is larger than maximum value.

B. Preferred value must be a fixed unit, not a percentage.

C. Clamp requires only two parameters, not three.

D. Units must be the same for all parameters.

Solution

1. Step 1: Compare min and max values

   The minimum is 300px, and the maximum is 200px. Minimum cannot be larger than maximum.

2. Step 2: Validate clamp parameter rules

   Clamp requires min ≤ preferred ≤ max. Here min > max, which is invalid.

3. Final Answer:

   Minimum value is larger than maximum value. -> Option A

4. Quick Check:

   Clamp min ≤ max rule violated = B [OK]

Hint: Check min ≤ max in clamp parameters [OK]

Common Mistakes:

• Ignoring order of min and max values
• Thinking percentages can't be used as preferred
• Believing clamp accepts only two parameters

5. You want a responsive padding that is at least 1rem, scales with viewport width at 5vw, but never exceeds 4rem. Which CSS rule correctly uses clamp()?

hard

A. padding: clamp(4rem, 5vw, 1rem);

B. padding: clamp(5vw, 1rem, 4rem);

C. padding: clamp(1rem, 5vw, 4rem);

D. padding: clamp(1rem, 4rem, 5vw);

Solution

1. Step 1: Identify clamp parameter order

   Clamp requires parameters in order: minimum, preferred, maximum.

2. Step 2: Match values to parameters

   Minimum padding is 1rem, preferred is 5vw (scales with viewport), maximum is 4rem.

3. Step 3: Check options for correct order

   Only padding: clamp(1rem, 5vw, 4rem); matches the correct order and values.

4. Final Answer:

   padding: clamp(1rem, 5vw, 4rem); -> Option C

5. Quick Check:

   Clamp(min=1rem, preferred=5vw, max=4rem) = A [OK]

Hint: Clamp(min, preferred, max) with correct units and order [OK]

Common Mistakes:

• Mixing order of parameters
• Putting max before min
• Using fixed units for preferred value only