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.