Learn

Sometimes we will want to design elements to dynamically scale but also stay confined between an upper and lower bound. The clamp() function is ideal for achieving this!

As its name suggests, the clamp() function enables a specified value to be kept within an upper and lower bound.

.main-text{ font-size: clamp(12px, 1.5vw, 48px); }

The clamp() function takes three parameters in a specific order:

  1. The first argument specifies the minimum value. If the preferred value, given as the second argument, is less than this value, then the minimum value will be used. In the code snippet above, 12px is given as the minimum value of the font-size property.
  2. The second argument specifies the preferred value. This value is used as long as it is greater than the value of the first argument (lower bound) and less than the value of the third argument (upper bound). In the code snippet above, 1.5vw is given as the preferred value of the font-size property.
  3. The third argument specifies the maximum value. This value is the largest value that the property will be set to. In the code snippet above, 48px is given as the maximum value of the font-size property.

Instructions

1.

Go back to the .card selector ruleset and replace the width value with the clamp() function. Set the minimum value to be 200px, the preferred value to be 90%, and the maximum value to be 600px.

Adjust the size of the browser to how the width of the element of the card class changes.

2.

Inside of the .card-text selector ruleset, replace the existing width value with the clamp() function. Set the minimum value to be 50px, the preferred value to be 80%, and the maximum value to be 600px.

3.

Still inside of the .card-text selector ruleset add a font-size property and set the clamp() function to be its value. Set 1.5rem to be the minimum value, 1.8vw to be the preferred value, and 1.8rem to be the maximum value.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?