Min and max functions in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width to the minimum of 300px or 50% of the viewport width.

CSS

width: [1](300px, 50vw);

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

Amin

Bcalc

Cclamp

Dmax

Attempts:

3 left

💡 Hint

Common Mistakes

Using max() instead of min() will pick the larger value.

Using calc() or clamp() here won't directly pick the minimum.

The min() function chooses the smaller value between 300px and 50vw, so the width will never exceed 300px or 50% of the viewport width.

2fill in blank

medium

Complete the code to set the font size to the maximum of 16px or 2vw.

CSS

font-size: [1](16px, 2vw);

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

Amax

Bmin

Ccalc

Dclamp

Attempts:

3 left

💡 Hint

Common Mistakes

Using min() will pick the smaller value, which might make text too small.

Using clamp() or calc() won't directly pick the maximum.

The max() function picks the larger value between 16px and 2vw, ensuring the font size is never smaller than 16px.

3fill in blank

hard

Fix the error in the code to correctly limit the height between 100px and 50vh.

CSS

height: [1](100px, 50vh);

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

Amax

Bmin

Cheight

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using max() will pick the larger value, which can exceed limits.

Using height or width as a function name is invalid.

Using min() here ensures the height does not exceed 100px or 50vh, whichever is smaller.

4fill in blank

hard

Fill both blanks to set padding to the minimum of 20px or 5vw and margin to the maximum of 10px or 2vw.

CSS

padding: [1](20px, 5vw);
margin: [2](10px, 2vw);

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

Amin

Bmax

Ccalc

Dclamp

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping min and max functions.

Using calc() or clamp() instead of min/max.

Padding uses min() to not exceed 20px or 5vw. Margin uses max() to be at least 10px or 2vw.

5fill in blank

hard

Fill all three blanks to set width to clamp between 200px and 80vw with a preferred size of 50vw.

CSS

width: [1]([2], 50vw, [3]);

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

Amin

Bclamp

C80vw

D200px

Attempts:

3 left

💡 Hint

Common Mistakes

Using min() or max() instead of clamp().

Swapping min and max values.

The clamp() function sets width to stay between 200px (minimum) and 80vw (maximum), preferring 50vw.

Practice

1. What does the CSS function min() do when used in a style rule?

easy

A. It selects the largest value from the given list of values.

B. It multiplies all the values together.

C. It averages all the values given.

D. It selects the smallest value from the given list of values.

Solution

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

   The min() function compares all values inside it and picks the smallest one.

2. Step 2: Compare with other functions

   Unlike max() which picks the largest, min() picks the smallest value.

3. Final Answer:

   It selects the smallest value from the given list of values. -> Option D

4. Quick Check:

   min() = smallest value [OK]

Hint: Remember: min() picks smallest, max() picks largest [OK]

Common Mistakes:

• Confusing min() with max()
• Thinking min() averages values
• Assuming min() multiplies values

2. Which of the following is the correct syntax to set a width using the max() function in CSS?

easy

A. width: max(100px, 50%);

B. width: max[100px, 50%];

C. width: max{100px, 50%};

D. width: max 100px, 50%;

Solution

1. Step 1: Recall CSS function syntax

   CSS functions use parentheses () to enclose arguments, separated by commas.

2. Step 2: Check each option's syntax

   Only width: max(100px, 50%); uses parentheses and commas correctly: max(100px, 50%).

3. Final Answer:

   width: max(100px, 50%); -> Option A

4. Quick Check:

   Correct CSS function syntax uses parentheses [OK]

Hint: CSS functions always use parentheses () [OK]

Common Mistakes:

• Using square brackets or curly braces instead of parentheses
• Omitting commas between values
• Writing function name without parentheses

3. Consider the CSS rule:
width: min(300px, max(50%, 200px));
What will be the computed width if the container is 400px wide?

medium

A. 300px

B. 200px

C. 50%

D. 400px

Solution

1. Step 1: Evaluate the inner max() function

   max(50%, 200px) compares 50% of 400px (which is 200px) and 200px. Both are equal, so result is 200px.

2. Step 2: Evaluate the outer min() function

   min(300px, 200px) picks the smaller value, which is 200px.

3. Final Answer:

   200px -> Option B

4. Quick Check:

   min(300px, max(50%, 200px)) = 200px [OK]

Hint: Calculate inner max() first, then outer min() [OK]

Common Mistakes:

• Confusing which function to evaluate first
• Miscalculating 50% of container width
• Choosing max value instead of min

4. Identify the error in this CSS snippet:
height: min(100px max(50%, 150px));

medium

A. Using px and % together is invalid.

B. max() cannot be nested inside min().

C. Missing comma between 100px and max() arguments.

D. min() requires only one argument.

Solution

1. Step 1: Check syntax of min() arguments

   Arguments inside min() must be separated by commas. Here, 100px and max(50%, 150px) are missing a comma.

2. Step 2: Validate nesting and argument types

   Nesting max() inside min() is allowed. Mixing units like px and % is valid in these functions.

3. Final Answer:

   Missing comma between 100px and max() arguments. -> Option C

4. Quick Check:

   Arguments in CSS functions must be comma-separated [OK]

Hint: Always separate function arguments with commas [OK]

Common Mistakes:

• Forgetting commas between arguments
• Thinking nesting functions is invalid
• Believing mixed units cause errors here

5. You want a box width that is at least 150px but no more than 40% of the viewport width. Which CSS rule correctly uses min() and max() to achieve this?

hard

A. width: max(150px, min(40vw, 100%));

B. width: min(150px, max(40vw, 100%));

C. width: min(max(150px, 40vw), 100%);

D. width: max(min(150px, 40vw), 100%);

Solution

1. Step 1: Understand the requirement

   The width should never be less than 150px (minimum) and never exceed 40% viewport width (maximum).

2. Step 2: Analyze width: max(150px, min(40vw, 100%));

   max(150px, min(40vw, 100%)) means: pick the larger between 150px and the smaller of 40vw or 100%. This ensures width is at least 150px but no more than 40vw.

3. Step 3: Check other options

   Options B, C, and D do not correctly enforce the min and max limits as required.

4. Final Answer:

   width: max(150px, min(40vw, 100%)); -> Option A

5. Quick Check:

   Use max() for minimum size, min() for maximum size [OK]

Hint: Use max() for minimum, min() for maximum limits [OK]

Common Mistakes:

• Swapping min() and max() roles
• Not nesting functions correctly
• Ignoring viewport units for responsiveness