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 */
}

Need a 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 */
}

Need a 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 */
}

Need a 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 */
}

Need a hint?

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