Learn

If we want to create responsive elements, the min() and max() functions are great solutions for setting case-specific design constraints. The min() function will select the smallest value from a range of values and set that as the associated property’s value. The max() function will select the largest value from a range of values, which will be used as the associated property’s value.

In the code snippet below, the width of the .content class is set to be 50vw. If the viewport width is greater than 1000 pixels (meaning that 50vw will be greater than 500px), the width of the content class will be set to a maximum width of 500px.

.content { width: 50vw; max-width: 500px; }

We can simplify the above code using the min() function and passing both values for the width and max-width property as the function’s arguments as follows:

.content { width: min(500px, 50vw); }

Now the min() function chooses the smaller value of two values given as arguments—in other words, the min() function defines the maximum width the content class can have. When the viewport width is smaller than 1000 pixels, the maximum width of the content class is 50vw. When the viewport width is greater than 1000 pixels, the maximum width is 500px.

If we were to replace the min() function in the above example with the max() function, then the width of the content class would be 500px if the viewport with is smaller than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the .content class will take up a minimum of 50vw.

.content { width: max(500px, 50vw); }

Both functions follow a similar syntax—you can pass more than one argument, separated by commas, in no specific order, and each argument can be in different units. The arguments of the functions can be other functions, math expressions, and literal values.

Instructions

1.

Inside the .card selector ruleset, create a width property that has a value of an empty min() function. Set both 90% and 600px as the arguments of the min() function in that order. Adjust the browser size and see if you can notice when the values change.

2.

Take a look at the .card-text selector ruleset—replace the current value of the width property to be an empty max() function. Pass 300px and 80% as arguments of the max() function in that order. Adjust the browser width to see the change in the width of the body text of the card-text class.

Notice that when the browser size becomes small enough the text runs off the side of the card. We will fix that in the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?