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
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.
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.