Viewport units in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the box to 50% of the viewport width.

CSS

div {
  width: 50[1];
}

Drag options to blanks, or click blank then click option'

Aem

Bpx

Cvh

Dvw

Attempts:

3 left

💡 Hint

Common Mistakes

Using vh which relates to viewport height, not width.

Using fixed units like px which do not scale with viewport.

The vw unit means 1% of the viewport width. So 50vw is half the viewport width.

2fill in blank

medium

Complete the code to set the height of the header to 10% of the viewport height.

CSS

header {
  height: 10[1];
}

Drag options to blanks, or click blank then click option'

Avh

Bvw

Crem

Dpt

Attempts:

3 left

💡 Hint

Common Mistakes

Using vw which relates to width, not height.

Using fixed units like pt which do not scale with viewport.

The vh unit means 1% of the viewport height. So 10vh is 10% of the browser window height.

3fill in blank

hard

Fix the error in the code to make the box height 100% of viewport height.

CSS

.box {
  height: 100[1];
}

Drag options to blanks, or click blank then click option'

Apx

Bvh

Cem

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Using % which depends on parent height.

Using fixed units like px which do not scale.

Using vh sets height relative to viewport height. % would be relative to parent, which may not fill viewport.

4fill in blank

hard

Fill both blanks to set the font size to 5% of viewport width and margin to 2% of viewport height.

CSS

p {
  font-size: 5[1];
  margin: 2[2];
}

Drag options to blanks, or click blank then click option'

Avw

Bvh

Cem

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up vw and vh units.

Using fixed units like px which do not scale.

vw is used for font size relative to viewport width, and vh for margin relative to viewport height.

5fill in blank

hard

Fill all three blanks to create a responsive square box with width and height 30% of viewport width and padding 1% of viewport height.

CSS

.square {
  width: 30[1];
  height: 30[2];
  padding: 1[3];
}

Drag options to blanks, or click blank then click option'

Avh

Bvw

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Using vh for width or height which can distort the square.

Using fixed units like px which do not scale.

Width and height use vw to keep the box square relative to viewport width. Padding uses vh for vertical spacing.

Practice

1. What does the CSS unit 1vw represent?

easy

A. 1% of the viewport's width

B. 1% of the viewport's height

C. 1 pixel

D. 1% of the parent element's width

Solution

1. Step 1: Understand viewport width unit

   The unit vw stands for viewport width, so 1vw equals 1% of the browser window's width.

2. Step 2: Compare with other units

   Unlike vh which is viewport height, vw relates only to width, not height or pixels.

3. Final Answer:

   1% of the viewport's width -> Option A

4. Quick Check:

   1vw = 1% viewport width [OK]

Hint: Remember vw = viewport width percent [OK]

Common Mistakes:

• Confusing vw with vh
• Thinking vw is pixels
• Mixing viewport units with parent size

2. Which of the following is the correct CSS syntax to set an element's height to 50% of the viewport height?

easy

A. height: 50vw;

B. height: 50vmax;

C. height: 50vmin;

D. height: 50vh;

Solution

1. Step 1: Identify viewport height unit

   The unit vh means viewport height, so 50vh means 50% of the viewport height.

2. Step 2: Check other units

   vw is viewport width, vmin is the smaller of width or height, and vmax is the larger. Only vh sets height relative to viewport height directly.

3. Final Answer:

   height: 50vh; -> Option D

4. Quick Check:

   Use vh for viewport height in CSS [OK]

Hint: Use vh for height, vw for width [OK]

Common Mistakes:

• Using vw for height
• Confusing vmin and vmax
• Forgetting semicolon in CSS

3. Given this CSS:

div {
  width: 10vw;
  height: 20vh;
}

If the browser window is 1000px wide and 800px tall, what will be the div's width and height in pixels?

medium

A. Width: 200px, Height: 400px

B. Width: 10px, Height: 20px

C. Width: 100px, Height: 160px

D. Width: 1000px, Height: 800px

Solution

1. Step 1: Calculate width from vw

   10vw means 10% of viewport width. 10% of 1000px = 100px.

2. Step 2: Calculate height from vh

   20vh means 20% of viewport height. 20% of 800px = 160px.

3. Final Answer:

   Width: 100px, Height: 160px -> Option C

4. Quick Check:

   vw and vh convert to % of viewport size [OK]

Hint: Multiply vw/vh % by viewport pixels [OK]

Common Mistakes:

• Mixing width and height values
• Calculating percentages incorrectly
• Confusing vh with vw

4. This CSS code is intended to make a box fill the smaller dimension of the viewport, but it doesn't work as expected:

.box {
  width: 50vmin;
  height: 50vmin;
}

What is the likely problem?

medium

A. The viewport units need a unit like px after vmin

B. The viewport size might be changing, causing unexpected results

C. vmin is not supported by browsers

D. The CSS syntax is correct; problem is elsewhere

Solution

1. Step 1: Understand vmin behavior

   vmin uses the smaller of viewport width or height. If viewport changes size (like resizing window), the box size changes too.

2. Step 2: Identify dynamic viewport effect

   Because viewport size can change, the box size changes dynamically, which may look like it doesn't work as expected.

3. Final Answer:

   The viewport size might be changing, causing unexpected results -> Option B

4. Quick Check:

   vmin depends on viewport size changes [OK]

Hint: Remember viewport units react to window resizing [OK]

Common Mistakes:

• Thinking vmin needs px unit
• Assuming viewport units are fixed
• Believing vmin is unsupported

5. You want a square element that always fits inside the viewport without scrolling, using viewport units. Which CSS rule ensures the square's size adapts to the smaller viewport dimension?

hard

A. width: 100vmin; height: 100vmin;

B. width: 100vw; height: 100vh;

C. width: 100vmax; height: 100vmax;

D. width: 100%; height: 100%;

Solution

1. Step 1: Understand vmin and vmax

   vmin is the smaller of viewport width or height, vmax is the larger.

2. Step 2: Choose unit for fitting inside viewport

   To fit inside viewport without scrolling, use vmin so the square fits the smaller dimension.

3. Step 3: Confirm width and height match

   Setting both width and height to 100vmin creates a square that fits inside viewport.

4. Final Answer:

   width: 100vmin; height: 100vmin; -> Option A

5. Quick Check:

   Use vmin for square fitting smaller viewport side [OK]

Hint: Use vmin for size based on smaller viewport side [OK]

Common Mistakes:

• Using vmax causes overflow
• Using 100% depends on parent size
• Confusing vw/vh with vmin/vmax