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.

Practice

1. What is the main purpose of responsive design in web development?

easy

A. To make websites look good on all screen sizes

B. To add animations to a website

C. To create websites only for desktop computers

D. To increase website loading speed

Solution

1. Step 1: Understand the goal of responsive design

   Responsive design aims to make websites adjust their layout and content to fit different screen sizes like phones, tablets, and desktops.

2. Step 2: Compare options to the goal

   Only To make websites look good on all screen sizes matches this goal by focusing on making websites look good on all screen sizes.

3. Final Answer:

   To make websites look good on all screen sizes -> Option A

4. Quick Check:

   Responsive design = adapt to screen sizes [OK]

Hint: Responsive design means adapting to screen sizes [OK]

Common Mistakes:

• Confusing responsive design with animations
• Thinking responsive design is only for desktops
• Believing it only improves loading speed

2. Which CSS syntax is used to apply styles only on screens smaller than 600px wide?

easy

A. @media screen and (width: 600px) { ... }

B. @media screen and (min-width: 600px) { ... }

C. @media (width > 600px) { ... }

D. @media screen and (max-width: 600px) { ... }

Solution

1. Step 1: Identify correct media query syntax for max-width

   The correct syntax to target screens smaller than 600px is using max-width: 600px inside @media.

2. Step 2: Check each option

   @media screen and (max-width: 600px) { ... } uses max-width: 600px correctly. @media screen and (min-width: 600px) { ... } uses min-width which targets larger screens. Options C and D use incorrect syntax.

3. Final Answer:

   @media screen and (max-width: 600px) { ... } -> Option D

4. Quick Check:

   max-width targets smaller screens [OK]

Hint: Use max-width for smaller screens in @media [OK]

Common Mistakes:

• Using min-width instead of max-width for small screens
• Incorrect media query syntax
• Missing 'screen' keyword

3. Given the CSS below, what will happen when the browser width is 500px?

body { background-color: white; } @media (max-width: 600px) { body { background-color: lightblue; } }

medium

A. The background color will be lightblue

B. The background color will be black

C. The background color will be white

D. There will be no background color

Solution

1. Step 1: Understand media query condition

   The media query applies styles when the screen width is 600px or less.

2. Step 2: Check the browser width and applied styles

   At 500px width, the media query condition is true, so the background color changes to lightblue, overriding the default white.

3. Final Answer:

   The background color will be lightblue -> Option A

4. Quick Check:

   Width 500px < 600px triggers lightblue background [OK]

Hint: Media queries override styles when conditions match [OK]

Common Mistakes:

• Ignoring media query and thinking default style applies
• Confusing max-width with min-width
• Assuming no style change occurs

4. Identify the error in this CSS snippet for responsive design:

@media max-width: 800px { .container { width: 100%; } }

medium

A. Using width instead of max-width

B. Missing parentheses around max-width condition

C. Incorrect selector .container

D. No error, code is correct

Solution

1. Step 1: Check media query syntax

   The correct syntax requires parentheses around the condition, like (max-width: 800px).

2. Step 2: Identify the error in the snippet

   The snippet misses parentheses, so it is invalid CSS and won't work as intended.

3. Final Answer:

   Missing parentheses around max-width condition -> Option B

4. Quick Check:

   Media queries need parentheses [OK]

Hint: Always wrap media conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in @media queries
• Confusing max-width with width property
• Thinking selector causes error

5. You want images on your website to resize smoothly on different devices. Which CSS approach best supports responsive design?

hard

A. Use only max-width without height

B. Set fixed width and height in pixels

C. Set image width to 100% and height to auto

D. Use background images instead of <img> tags

Solution

1. Step 1: Understand image resizing in responsive design

   Images should scale with their container to fit different screen sizes without distortion.

2. Step 2: Evaluate CSS options for images

   Setting width to 100% and height to auto keeps the image's aspect ratio and allows it to resize smoothly.

3. Final Answer:

   Set image width to 100% and height to auto -> Option C

4. Quick Check:

   Width 100% + height auto = responsive images [OK]

Hint: Use width 100% and height auto for responsive images [OK]

Common Mistakes:

• Using fixed pixel sizes causing images to not resize
• Ignoring height causing distortion
• Thinking background images solve all responsive needs