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.

Practice

1. Why is responsive design important for websites?
Responsive design means:

easy

A. The website uses only one fixed size for all devices.

B. The website adjusts its layout to fit different screen sizes.

C. The website works only on desktop computers.

D. The website ignores mobile users.

Solution

1. Step 1: Understand responsive design purpose

   Responsive design means the website changes layout to fit screens of all sizes.

2. Step 2: Compare options with definition

   Only "The website adjusts its layout to fit different screen sizes." describes adjusting layout for different screen sizes, matching responsive design.

3. Final Answer:

   The website adjusts its layout to fit different screen sizes. -> Option B

4. Quick Check:

   Responsive design = layout adjusts to screen size [OK]

Hint: Responsive means adapting layout to screen size [OK]

Common Mistakes:

• Thinking responsive means fixed size
• Assuming it works only on desktop
• Ignoring mobile users

2. Which CSS technique is commonly used in responsive design to adjust layouts?
Choose the correct syntax example:

easy

A. @media (max-width: 600px) { body { font-size: 1.2rem; } }

B. font-size: 16px fixed;

C. layout: fixed 600px;

D. @screen 600px { body { font-size: 1.2rem; } }

Solution

1. Step 1: Identify correct media query syntax

   CSS media queries use @media (condition) { rules } to apply styles based on screen size.

2. Step 2: Check options for valid syntax

   @media (max-width: 600px) { body { font-size: 1.2rem; } } uses correct @media syntax; others are invalid CSS.

3. Final Answer:

   @media (max-width: 600px) { body { font-size: 1.2rem; } } -> Option A

4. Quick Check:

   Media queries use @media (condition) [OK]

Hint: Look for '@media' keyword for responsive CSS [OK]

Common Mistakes:

• Using invalid CSS like '@screen'
• Adding 'fixed' keyword incorrectly
• Confusing px with rem units

3. Given this CSS snippet:

@media (max-width: 500px) { .menu { display: none; } }

What happens when the screen width is 480px?

medium

A. The menu changes color.

B. The menu stays visible.

C. The menu is hidden from view.

D. The menu moves to the bottom.

Solution

1. Step 1: Understand media query condition

   The rule applies when screen width is 500px or less.

2. Step 2: Apply condition to 480px screen

   Since 480px is less than 500px, the CSS inside applies, hiding the menu.

3. Final Answer:

   The menu is hidden from view. -> Option C

4. Quick Check:

   Screen ≤ 500px hides menu [OK]

Hint: Check if screen size meets media query condition [OK]

Common Mistakes:

• Ignoring media query conditions
• Assuming menu changes color without code
• Thinking menu moves without position rules

4. This CSS code is meant to hide an image on small screens but it doesn't work:

@media max-width: 400px { img { display: none; } }

What is the error?

medium

A. Media queries don't work on images.

B. Wrong selector for images.

C. display: none; is invalid.

D. Missing parentheses around max-width condition.

Solution

1. Step 1: Check media query syntax

   Media queries require parentheses around conditions, like @media (max-width: 400px).

2. Step 2: Identify missing parentheses

   The code misses parentheses, so CSS is invalid and ignored.

3. Final Answer:

   Missing parentheses around max-width condition. -> Option D

4. Quick Check:

   Media queries need parentheses [OK]

Hint: Always wrap media conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in @media
• Using wrong selectors
• Thinking display:none is invalid

5. You want a button in Figma to look good on phones and desktops. Which approach best uses responsive design principles?

hard

A. Use flexible width and height with constraints, plus test on different screen sizes.

B. Set fixed pixel sizes for the button and ignore resizing.

C. Design only for desktop size and scale down manually.

D. Create separate buttons for each device without constraints.

Solution

1. Step 1: Understand responsive design in Figma

   Responsive design uses flexible sizes and constraints to adapt elements to screen sizes.

2. Step 2: Evaluate options for best practice

   "Use flexible width and height with constraints, plus test on different screen sizes." uses flexible sizing and testing, matching responsive design principles.

3. Final Answer:

   Use flexible width and height with constraints, plus test on different screen sizes. -> Option A

4. Quick Check:

   Flexible constraints + testing = responsive design [OK]

Hint: Use flexible constraints and test on devices [OK]

Common Mistakes:

• Using fixed sizes only
• Designing for one device only
• Ignoring testing on multiple screens