Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Values and Units Relative Length Units

Relative Length Units vh vmin vw

can any buddy tell me what does vh do and vw do and vmin do what i think is VH will alter and adjust the element on the page if the height of viewport is changed and VW will adjust the element if the width of the viewport is changed and a little bit confused with vmin please clarify

3 Answers

Wayne Priestley
Wayne Priestley
19,567 Points

Hi Gurdeep,

Here is a link to an article that explains everything clearly for you css tricks article

Hope it helps

Rui Bi
Rui Bi
29,853 Points

vmin works as vw if the viewport's height is greater than its width, while vmin works as vh if the viewport's width is greater than its height. It takes the lesser of the height and width values as its point of reference.

Rui Bi
Rui Bi
29,853 Points

More details: 1 vw is a relative size unit equal to 1% of the viewport's width, while 1 vh is equivalent to 1% of the viewport's height.

1 vmin is equal to 1% of either the viewport's width or height, whichever is smaller.

In addition, there is also vmax; 1 vmax is equal to either the viewport's width or height, whichever is larger.

thank you