Performing dynamic mathematical calculations to set property values might sound difficult, but the calc() function makes handling mathematical expressions simple. The calc() function takes a mathematical expression as its argument and returns the calculated value. We can use the calc() function as a value of CSS properties that expect numeric values.
The calc() function can be used to perform mathematical operations on a mix of units (rem, vw, px, etc). When performing addition (+) or subtraction (-), both numbers being operated on must have specified units. Division (/) requires the divisor (second operand) to be a unit-less number, and multiplication (*) requires one of the operands to be unit-less. Keep in mind that the calc() function requires whitespace between the operator and the numbers in the expression. The function can also be used as one of the multiple values for a property or argument in another function.
For example, what if we wanted to dynamically change the left and right margin of an element to be 1.5 percent of the viewport width added with 5px?
Above, we set the top and bottom margins of the .item selector to be 15px and use the calc() function to set the left and right margin values by adding 1.5vw and 5px. Notice the whitespace on either side of the +—it is required to add whitespace between operators and operands in the function.
A full list of operators, expression types, and use cases for calc() can be found on the Mozilla Developer Page.
Instructions
The postcard title should scale depending on the size of the viewport. Inside the .card-title selector ruleset, replace the current font-size property value with the sum of 2vw and 1.5rem using the calc() function.
The main card text should be centered no matter the size of the postcard. Inside the .card-text selector ruleset add a left property and set its value to be the difference of 50% and half of the width property’s value using the calc() function.
Now, use the calc() function to set the margin on each item listed at the bottom of the postcard.
Navigate to the ul.activities selector ruleset and add a margin property. Set the first value of the property (for the top and bottom margin) to be the sum of 1vw and 0.5rem. The second property (for the left and right margin) value should be 2rem.