What is responsive design in CSS - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does responsive design primarily aim to achieve?

Choose the best description of what responsive design does in web development.

A It changes the website's color scheme based on user preferences.

B It makes a website adjust its layout and content to look good on different screen sizes.

C It improves website speed by compressing images automatically.

D It adds animations to a website to make it more interactive.

💡 Hint

Think about how websites look on phones versus big monitors.

Responsive design means the website changes its layout and content to fit different screen sizes, like phones, tablets, and desktops. This helps users have a good experience no matter what device they use.

📝 Syntax

intermediate

Which CSS snippet correctly applies a responsive style for screens smaller than 600px?

Select the CSS code that changes the background color to lightblue only on screens narrower than 600px.

A body { background-color: lightblue; max-width: 600px; }

B @media screen and (min-width: 600px) { body { background-color: lightblue; } }

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

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

💡 Hint

Look for the media query that targets screens up to 600px wide.

The @media (max-width: 600px) rule applies styles only when the screen width is 600 pixels or less, making it perfect for responsive design on small devices.

❓ layout

advanced

What will be the layout behavior of this CSS on different screen sizes?

Given the CSS below, what happens to the container's layout when the screen width is less than 500px?

CSS

.container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 500px) {
  .container {
    flex-direction: column;
  }
}

A The container items become hidden overflow on small screens.

B The container items stay in a row on all screen sizes.

C The container items disappear on screens smaller than 500px.

D The container items stack vertically on screens smaller than 500px.

💡 Hint

Think about what changing flex-direction from row to column does.

Flexbox with flex-direction: row arranges items side by side. Changing it to column stacks them vertically. The media query changes this on small screens.

❓ accessibility

advanced

How does responsive design improve accessibility?

Choose the best explanation of how responsive design helps users with different needs.

A It ensures content is readable and usable on all devices, including screen readers and zoomed views.

B It automatically translates content into multiple languages.

C It disables animations to reduce distractions for all users.

D It forces all users to see the same fixed layout regardless of device.

💡 Hint

Think about how flexible layouts help users who zoom or use assistive devices.

Responsive design adapts content to different screen sizes and user settings, making it easier for everyone to read and navigate, including those using screen readers or zooming in.

❓ selector

expert

Which CSS selector targets only images inside a responsive grid container?

Given a grid container with class grid-container, which selector applies styles only to images inside it?

A .grid-container img

B .grid-container > img

C img.grid-container

D grid-container img

💡 Hint

Think about descendant selectors versus direct child selectors.

.grid-container img selects all <img> elements inside any element with class grid-container, no matter how deep. This is best for styling images inside the 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