From the course: Interactive Animations with CSS and JavaScript

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a square with CSS vmin

Create a square with CSS vmin

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Create a square with CSS vmin

“

- [Instructor] Now that we have a fair amount of structure in place, it's time to start making our presentation resemble our mock-up a little more closely. So if we look over here, we can see I want to have my presentation area be a square. And I want that square to be centered eventually on my content area. But let's talk about formatting something as a square first. It's not as trivial as it sounds. But imagine if you're in a window like this, one that is broader than it is tall, well what if I resize my window and make it, you know, taller than it is broad? Now all of a sudden, I can't used fixed units. I mean, I could make a fixed sized square using pixels or something like that, but it would be truncated on smaller devices. Thankfully, CSS has a view unit for us that is called VMIN. And so let's go back into our source code. And I'm gonna add some styling to the presentation area. If you look back here in the HTML. This presentation area is what I want to format. I want to make…

Contents