Keep an eye on your inbox!
Hmm, that didn't work. Try again?

How—and why—to use vh and vw in Webflow

See how the vh and vw units empower you to make your typography and other site elements truly responsive.

Waldo Broodryk
February 16, 2016
Web design

In your wanderings across the web, you may have seen some sites with typography that scales beautifully as you resize your browser window. Or full-screen sections that remain that way no matter how big the viewport gets.

Here’s a few examples from CodePen:

 
 
 

Here's a simple example I built in Webflow: http://vh-and-vw.webflow.io/

Now the “old-school” way of setting element and font sizes was with pixel-based widths and heights. Try using those units nowadays and you’ll see a lot of shaking heads.

To achieve real responsiveness, you need to start thinking in relative units and using vh and vw style settings to control the widths and heights of our elements no matter the viewport size.

You can also use percentage-based units, but keep in mind that they’re based on the parent element, while vh and vw style units are based on the viewport.

vh and vw defined

vw and vh are length units representing 1% of the viewport size for viewport width (vw) and height (vh), respectively.

Wondering what browsers support vh and vw? Check can I use? for the latest!

vh and vw in action

To use vh and vw units in Webflow, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you’d like to cover) into any width or height field.

So to cover 100% of the viewport, you’d set 100% for the width and 100vh for the height. To cover half of the viewport height, you’d set a height of 50vh. You may be asking, why not use 100vw for the width, that is because the vw style doesn't take into account the scrollbar width and could cause side scrolling on browsers with wide scroll bars such as Internet Explorer.

Responsive typography with vh and vw

You can also use the vh and vw as font sizes to make text scale with the browser window. This is great way to keep your content sized just right no matter the viewport dimensions.

Are you using vh and/or vw yet?

If so, we’d love to see what you’ve done with them! Share your links below, on Twitter, or on Facebook.

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Waldo Broodryk

I'm a web designer and Webflow evangelist. Follow me @waldobroodryk

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.