design tip

Full height and full width

If we would like to set our app or website adjusted to the viewport, vh and vw units make it much easier. vh means it’s 100% of the viewport height, and vw means the 100% width of the viewport. Let’s check how it works in a real example: In the example above, I set the blue-box element to 50vw and 50vh, which means it should have a 50% of the viewport width and 50% of the viewport height, and if you resize the viewport you may notice how it adjusts. Cool, right?