Background Split Alignment Tutorial (9 exercises)

Optimizing Column Alignment for Variable Viewport Widths

Everything's looking great on wider screens...

Good-looking wide viewportsLoading

...but when the viewport gets small, things start going out of alignment:

Loading exercise


0:00 Everything's looking great on wider screens, but when resizing the viewport, things start going out of alignment, and it makes sense.

0:06 If we look at the third column, we're calculating its width based on the maxWidth value, and assuming that this value will always be at its max.

0:14 When I resize the viewport, you can see that clearly, that main panel's width is changing. Instead of defining the maxWidth value, what we want is anything between the max value and technically, . We want to pass a range instead of a fixed value, and we can do this with the CSS minmax() function.

0:32 Your challenge here is to wrap the columns with fluid width -- so that's every column except the second one -- inside a minmax function, so you can pass a range that covers all the possible values. For the second column, you can keep the theme width 56, because it's a constant width.

0:48 Good luck.