Welcome to my world!

basics 3: vh meets vw

Here we have a box that measures 40vh tall, and 40vw wide: 

.simple-box {
  height: 40vh;
  width: 40vw;
  p {
    font-size: 6vw;
    padding: 2vw;
    line-height: 11vh;
  }
}

In this example, the box will always measure 40% of the height of the viewport, and 40% of its width.  So, as we resize the browser either vertically or horizontally, the box's size adjusts accordingly.

In addition, we're also having some fun with the line height -- setting it at 11vh, so that it shrinks along with the height of the viewport.