Background Split Alignment Tutorial (9 exercises)

Compute Column Widths with the CSS calc() Function

Before we adjust the column width to work on smaller screens, let's update the third column to be less magic and more explicit.


Your challenge is to update the column to compute the width using the CSS calc() function, using theme values instead of using a hardcoded 384px:

Loading exercise


0:00 Before we adjust our column width to work in smaller screens, let's make the value for our third column a bit more explicit and less magic.

0:07 Instead of just using a pixel value, we will use the CSS calc() function to explicitly communicate how we landed on that value. Instead of using pixel values, we'll reach for those theme values with Tailwind's theme function.

0:20 Good luck.