Free Practice Quiz Question List

4 Responsive Web Design Online Quiz Questions

Use this free practice quiz with 20 questions to review 4 Responsive Web Design, test your knowledge, and prepare for your next test or exam.

20 questions

True or false

1 point

True or false: A responsive page should require a separate version for each device size.

A
True
B
False

Choose one

1 point

Which viewport element setting helps a mobile browser lay out a page using the device's CSS-pixel width?

A
<meta name="viewport" content="width=100%; initial-scale=1">
B
<meta name="viewport" content="width=device-width, initial-scale=1">
C
<meta name="viewport" content="device-width=width, scale=1">
D
<meta name="viewport" content="width=device-width, maximum-scale=1">

Fill in the blank

1 point

The viewport is the of the browser window available for page content.

Written response

1 point

What CSS feature applies styles only when a condition, such as a viewport-width condition, is met?

Choose one

1 point

You need to arrange navigation items in a single row. Which layout tool is especially useful for arranging items in one direction?

A
CSS Grid
B
Flexbox
C
A viewport meta element
D
A media query

Fill in the blank

1 point

A is a point at which a layout changes to better suit the available space.

Choose all

1 point

Which three CSS sizing approaches can help a layout use available space flexibly or avoid excessive width? Select all that apply.

A
Use percentage sizing where appropriate.
B
Use flexible grid units such as fr.
C
Give every content area a fixed pixel width.
D
Use a constraint such as max-width.
E
Prevent content from wrapping at every viewport width.

True or false

1 point

True or false: Ordinary text should generally reflow at a width equivalent to 320 CSS pixels without two-dimensional scrolling, although some content such as a wide data table may need it.

A
True
B
False

Written response

1 point

In the example page layout, what minimum viewport width in rem triggers the change from a single column to the wider layout?

Choose one

1 point

In the example page layout, what happens when the viewport reaches at least 50rem wide?

A
The sidebar is hidden at wider widths.
B
The main content and sidebar remain stacked at all widths.
C
The main content and sidebar appear side by side at widths of at least 50rem.
D
The layout changes to three equal-width columns.

Choose all

1 point

Which checks help evaluate a responsive page's usability across viewport sizes? Select all that apply.

A
Resize the browser and inspect both narrow and wide viewports.
B
Zoom in and check whether content remains usable.
C
Try navigating the page with a keyboard.
D
Look for clipped text, overlapping elements, tiny controls, or unintended horizontal scrolling.
E
Choose breakpoints to match particular device models.
F
Check that ordinary text reflows at a width equivalent to 320 CSS pixels without two-dimensional scrolling.

Open ended

1 point

You are planning a page with a main content area and a sidebar. Describe how you would make its layout responsive from narrow phones to wider screens, and name checks you would perform to evaluate its usability.

Choose one

1 point

Which CSS rule matches the material's approach for a centered text column that can grow on a large screen but stops at a readable width?

A
width: 70rem; margin-inline: auto;
B
width: min(100% - 2rem, 70rem); margin-inline: auto;
C
width: 100vw; margin-inline: 0;
D
width: 1000px; margin-inline: auto;

True or false

1 point

True or false: Providing an image's width and height attributes helps the browser reserve space while the image loads.

A
True
B
False

Choose one

1 point

Why should a responsive page include an appropriate viewport meta element in its head?

A
It forces every page to use a fixed width on all devices.
B
It tells mobile browsers to use the device's CSS-pixel width for the page layout.
C
It automatically switches the page to a desktop layout.
D
It prevents CSS media queries from running.

Choose one

1 point

A page's images and videos sometimes overflow their containers. Which CSS rule best applies the recommended starting fix?

A
img, video { width: 100vw; height: 100vh; }
B
img, video { min-width: 100%; height: auto; }
C
img, video { max-width: 100%; height: auto; }
D
img, video { max-height: 100%; width: auto; }

Choose one

1 point

You need to arrange a row of related controls along one direction. Which layout tool is specifically useful for arranging items in one direction?

A
Flexbox
B
CSS Grid
C
A viewport meta element
D
A media query

Written response

1 point

What is the name of the approach that starts with a simple layout for narrow screens and adds complexity when there is enough room?

Choose one

1 point

A page uses one grid column by default, then applies a two-column grid inside @media (min-width: 50rem). How should its main content and sidebar arrange themselves?

A
The main content and sidebar are side by side below 50rem and stacked above it.
B
The main content and sidebar are stacked below 50rem and side by side at and above 50rem.
C
The sidebar is hidden at and above 50rem.
D
The page uses two columns at every viewport width.

Written response

1 point

At what width, in CSS pixels, should content generally reflow without requiring two-dimensional scrolling to read ordinary text?