Using viewport units: vw, vh, vmin, vma

In this age of responsive web design, we, designers and developers, tend to use percentages instead of pixels especially when it comes to width and height for grids or containers. Fluid content should be our aim. People uses countless types of devices to access the web; we have no control over the screen size of these devices, but it doesn’t mean we have no control over how the content will be displayed.

Beyond using width and height properties, we now have the following viewport units: vw, vh, vmin, and vma. Another good news is that browser support for these are great. Still, it is advisable to provide fallback as necessary.


  • vh – Setting height for your background image. Maybe you want your hero image be on the top half part of the screen only, no matter the screen size.

header {
background: url( center center;
background-size: cover;
width: 100%;
height: 50vh;

See the Pen jEMBxZ by Kath (@kathcue) on CodePen.

    • vw – Font adjustment. In the same code, the font size of H1 is 8% of the viewport width (see it adjusts when you resize your viewport):

div h1 {
  font-size: 8vw;
  margin-bottom: .4em;
  line-height: 1.3em;
  color: #f66b0c;
  text-shadow: 1px 2px 0px rgba(255,255,255,.9);

You can find out more about viewport units here: 

Got ideas on where else we could use these properties? Share them in the comments!


Published by


Who is she? To her, she sees herself as a random person just like everyone else. She’s not the type who is obsessed with make-up and hot dresses. A hideous look is what she prefers to wear most of the time for she hates being noticed and stared at. She dons plain and unflattering clothes though sometimes tries to wear fancy ones when she feels like it. For her, the ultimate heavens inside a mall are bookstores and gift shops. She’d buy sheets of neon-colored papers even if she has no plans yet on where to use them, grab every book that seems to be interesting enough to read, picks on things she finds cute and worthy to be given as simple tokens of appreciation to people she could suddenly think of. A self-confessed bookworm (though not really anymore this time), it isn’t surprising how she also tried playing with words together using pen and paper. But as a child, it was drawing God-knows-what that she first fell in love with. She’s also amused in capturing life’s moments with whatever kind of camera she has in hand. When she was a little bit older, the popular string instrument that almost anyone knows how to play also became her object of addiction for quite some time (unfortunately, her vocal chords aren’t good enough). School wasn’t really a problem for her, though she believes her life during those days were kind of boring because she was too much of a ‘good student’. She doesn’t really like Math but finds it challenging and good food for her brain, just as solving intriguing puzzles or discovering unbelievable phenomena. She’s been trying too many things, perhaps why she also doesn’t seem to excel on anything. Until now she’s unsure whether she’s more of a left-brain or right-brain kind of person. She loves to eat, she loves to sleep. She’s more of a homebody more than a partygoer, which kind of explains why she’s not really good at socializing. She’s better at writing than speaking. She believes her flaws outweigh her assets (if ever there is). She’s not really an adventurer but recently she’s starting to be. She loves learning, accepts that mistakes are inevitable and some lessons are to be learned the hard way. She’s got theories on her own based on her experiences and beliefs. However, at 21, she also knows she’s still young and juvenile.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s