What is responsive design in CSS - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the page responsive by setting the viewport width.

CSS

<meta name="viewport" content="width=[1], initial-scale=1.0">

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

Adevice-width

Bfixed-width

C1000

Dscreen-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed width like 1000 makes the page not adapt on small screens.

Using incorrect keywords like 'fixed-width' or 'screen-width' causes no effect.

The device-width value tells the browser to match the screen's width, making the page responsive.

2fill in blank

medium

Complete the CSS media query to apply styles only on screens smaller than 600px.

CSS

@media (max-width: [1]) { body { background-color: lightblue; } }

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

A800px

B600px

C400px

D1000px

Attempts:

3 left

💡 Hint

Common Mistakes

Using a larger value like 1000px applies styles on bigger screens too.

Using a smaller value like 400px misses some small devices.

The media query with max-width: 600px applies styles when the screen is 600 pixels wide or less.

3fill in blank

hard

Fix the error in the CSS rule to make the image scale responsively.

CSS

img { width: [1]; height: auto; }

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

A100%

Bfixed

Cauto

D500px

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths like 500px prevents scaling on small screens.

Using 'auto' for width does not control the image size properly.

Setting width: 100% makes the image fill its container and scale on different screen sizes.

4fill in blank

hard

Fill both blanks to create a responsive grid with two columns on wide screens and one column on small screens.

CSS

.container { display: [1]; grid-template-columns: repeat([2], 1fr); gap: 1rem; }

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

Agrid

Bflex

C2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid changes layout behavior.

Using 1 column does not create multiple columns.

Using display: grid with repeat(2, 1fr) creates two equal columns for wide screens.

5fill in blank

hard

Fill all three blanks to write a media query that changes the grid to one column on screens smaller than 600px.

CSS

@media (max-width: [1]) { .container { grid-template-columns: repeat([2], 1fr); display: [3]; } }

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

Agrid

B600px

C1

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex display inside grid container changes layout.

Setting columns to 2 does not make it single column.

The media query targets screens up to 600px wide, setting one column with repeat(1, 1fr) and keeping display: grid.