Min and max functions in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS min() function do?

The min() function takes multiple values and uses the smallest one. It helps make layouts responsive by choosing the minimum size from given options.

beginner

How does the CSS max() function work?

The max() function picks the largest value from the list of values you provide. It ensures elements don’t get smaller than a certain size.

beginner

Give an example of using min() in CSS.

Example: width: min(50vw, 300px); means the width will be the smaller of 50% of the viewport width or 300 pixels.

intermediate

Why use min() and max() instead of fixed sizes?

They help create flexible layouts that adapt to screen size. This improves user experience on phones, tablets, and desktops.

intermediate

Can min() and max() accept different units?

Yes! You can mix units like px, em, vw, etc. The browser compares them and picks the smallest or largest value.

What will width: min(100px, 50vw); do on a small screen?

A Set width to 50vw

B Set width to 100px

C Set width to the larger of 100px or 50vw

D Cause an error

The min() function picks the smaller value. On a small screen, 50vw might be less than 100px, but usually 50vw is smaller, so width becomes 50vw.

Which CSS function picks the largest value?

A min()

B clamp()

C max()

D calc()

max() picks the largest value from the list.

Can min() and max() be used together?

A Yes, for example inside <code>clamp()</code>

B Only in JavaScript

C No, only one can be used at a time

D Only with fixed pixel values

They can be combined, often inside clamp() to create flexible ranges.

What units can you use inside min() and max()?

A Any CSS length units like px, em, rem, vw

B Only percentages (%)

C Only pixels (px)

D Only viewport units (vw, vh)

You can mix any CSS length units inside these functions.

Why are min() and max() useful for responsive design?

A They fix sizes so they never change

B They replace media queries

C They only work on desktop screens

D They allow sizes to adapt between limits

They help elements adapt size between minimum and maximum values, improving responsiveness.

Explain how the CSS min() function helps create responsive layouts.

Think about how choosing the smallest size can keep things neat on small screens.

Describe a scenario where using max() in CSS is helpful.

Consider when text or buttons should not become too small.