Why responsive design serves all devices in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the viewport for responsive design.

Figma

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

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

Afixed-width

Bdevice-width

Cscreen-width

Dpage-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed width instead of device width.

Confusing screen-width with device-width.

The device-width value tells the browser to match the screen width of the device, which is essential for responsive design.

2fill in blank

medium

Complete the CSS to make the container flexible for different screen sizes.

Figma

.container { display: [1]; }

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

Ablock

Bgrid

Cinline

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or inline which are not flexible layouts.

Confusing grid with flexbox.

Using flex allows the container to adjust its items responsively across devices.

3fill in blank

hard

Fix the error in the media query to apply styles on small screens.

Figma

@media (max-width: [1]) { .menu { display: none; } }

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

A60em

B600

C600px

D600pt

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting units in media queries.

Using wrong units like pt which are uncommon for screen.

The media query requires units like px to work correctly. Just a number won't work.

4fill in blank

hard

Fill both blanks to create a responsive image that scales with its container.

Figma

<img src="photo.jpg" style="width: [1]; height: [2];">

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

A100%

Bauto

C50px

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel sizes that don't scale.

Setting height to a fixed value causing distortion.

Setting width to 100% makes the image fill its container's width, and height auto keeps the aspect ratio.

5fill in blank

hard

Fill all three blanks to create a responsive grid layout with two columns on large screens and one column on small screens.

Figma

@media (min-width: [1]) { .grid { display: [2]; grid-template-columns: [3]; } }

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

A768px

Bflex

Crepeat(2, 1fr)

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for grid-template-columns.

Omitting units in min-width.

Confusing display block with grid.

The media query activates at 768px and above. The grid container uses grid display to enable grid layout, and grid-template-columns defines two columns.