Viewport units in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding viewport width (vw) unit

If the browser window width is 1000px, what will be the computed width of a box styled with width: 10vw;?

A 1000px

B 10px

C 100px

D 10,000px

💡 Hint

Remember that 1vw equals 1% of the viewport width.

The vw unit means 1% of the viewport width. So 10vw is 10% of 1000px, which is 100px.

📝 Syntax

intermediate

Which CSS rule correctly sets height to 50% of viewport height?

Select the CSS rule that sets an element's height to half the viewport height.

A height: 50vh;

B height: 50vw;

C height: 50%;

D height: 50pxvh;

💡 Hint

vh means viewport height, vw means viewport width.

vh is the unit for viewport height. So height: 50vh; sets height to 50% of viewport height.

❓ rendering

advanced

What is the visible height of the box on a 800px tall viewport?

Given this CSS, what is the visible height of the <div> box?

div {
  height: 50vh;
  max-height: 300px;
}

CSS

<div>Box</div>

A 50px

B 300px

C 400px

D 800px

💡 Hint

Check which is smaller: 50vh or max-height.

50vh of 800px is 400px, but max-height limits it to 300px, so height is 300px.

❓ selector

advanced

Which CSS selector targets elements with width less than 50vw?

Which CSS media query correctly applies styles only when viewport width is less than 50vw?

A @media (max-width: 50vw) { /* styles */ }

B @media (max-width: 50px) { /* styles */ }

C @media (max-width: 50vh) { /* styles */ }

D @media (max-width: 50%) { /* styles */ }

💡 Hint

Media queries accept viewport units like vw and vh.

max-width: 50vw means styles apply when viewport width is less than 50% of viewport width, which is logically consistent.

❓ accessibility

expert

How to ensure text remains readable on small viewports using viewport units?

You want text size to scale with viewport width but never become smaller than 1rem for readability. Which CSS rule achieves this?

A font-size: clamp(2vw, 1rem, 5vw);

B font-size: min(1rem, 2vw);

C font-size: 2vw;

D font-size: max(1rem, 2vw);

💡 Hint

Use CSS functions to set minimum font size.

max(1rem, 2vw) means font size is at least 1rem, scaling up with viewport width but never smaller than 1rem.