Min and max functions in CSS - Mini Project: Build & Apply

Using CSS min() and max() Functions for Responsive Text

📖 Scenario: You are creating a webpage header that should have text size that adjusts nicely on different screen sizes. You want the font size to never be smaller than 1.5rem and never larger than 3rem, but also scale smoothly with the viewport width.

🎯 Goal: Build a CSS style for a header element that uses the min() and max() functions to set a responsive font size that stays between 1.5rem and 3rem depending on the screen width.

📋 What You'll Learn

Create a CSS rule for the h1 element

Use the max() function to set a minimum font size of 1.5rem

Use the min() function to set a maximum font size of 3rem

Use a viewport width unit vw to make the font size scale between these limits

💡 Why This Matters

🌍 Real World

Responsive text sizing is important for websites to look good on phones, tablets, and desktops without text being too small or too large.

💼 Career

Web developers use CSS min() and max() functions to create flexible, accessible designs that adapt to different devices and user needs.

1

Create the basic CSS rule for the header

Write a CSS rule for the h1 element that sets the font size to 2rem as a starting point.

CSS

h1 {
  /* Set font size to 2rem */
  /* Your code here */
}

Hint

Use the selector h1 and set font-size: 2rem;

2

Add a variable font size using viewport width

Change the font-size property to use 5vw so the text size scales with the viewport width.

CSS

h1 {
  /* Change font size to 5vw for scaling */
  /* Your code here */
}

Hint

Replace 2rem with 5vw to make font size scale with screen width.

3

Use max() to set a minimum font size

Update the font-size to use the max() function with 1.5rem and 5vw so the font size never goes below 1.5rem.

CSS

h1 {
  /* Use max() to set minimum font size 1.5rem */
  /* Your code here */
}

Hint

Use font-size: max(1.5rem, 5vw); to keep font size at least 1.5rem.

4

Use min() and max() together to limit font size range

Set the font-size to use min() and max() together like this: font-size: min(3rem, max(1.5rem, 5vw)); so the font size scales with viewport but stays between 1.5rem and 3rem.

CSS

h1 {
  /* Use min() and max() to limit font size between 1.5rem and 3rem */
  /* Your code here */
}

Hint

Wrap the max() function inside min() to set upper and lower font size limits.

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