Mobile-first approach in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use a mobile-first approach in CSS?

Which of the following best explains the main reason developers use a mobile-first approach when writing CSS?

A It uses JavaScript to detect screen size and load styles dynamically.

B It ensures styles for small screens load first, improving performance on mobile devices.

C It applies desktop styles first, then overrides them for mobile devices.

D It disables styles on mobile devices to save bandwidth.

💡 Hint

Think about which devices usually have slower connections and smaller screens.

Mobile-first means writing CSS for small screens first. This helps pages load faster on phones and tablets because the browser applies simple styles first. Then, larger screen styles are added with media queries.

📝 Syntax

intermediate

Identify the correct mobile-first media query

Which CSS media query correctly follows the mobile-first approach to apply styles for screens wider than 600px?

A @media (max-width: 600px) { body { background: blue; } }

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

C @media (min-width: 600px) { body { background: blue; } }

D @media screen and (max-device-width: 600px) { body { background: blue; } }

💡 Hint

Mobile-first uses min-width to add styles for bigger screens.

Mobile-first CSS writes base styles for small screens. Then it uses @media (min-width: 600px) to add or override styles for screens 600px wide or larger.

❓ rendering

advanced

What background color will the page show on a 500px wide screen?

Given this CSS, what background color will the page have when viewed on a screen 500px wide?

CSS

body {
  background-color: white;
}

@media (min-width: 600px) {
  body {
    background-color: green;
  }
}

@media (min-width: 400px) {
  body {
    background-color: yellow;
  }
}

A Yellow

B White

C Green

D No background color

💡 Hint

Check which media queries apply at 500px width.

Base background is white. The @media (min-width: 400px) applies at 500px, changing background to yellow. The @media (min-width: 600px) does not apply because 500px is less than 600px.

❓ selector

advanced

Which CSS selector targets only mobile devices in a mobile-first approach?

You want to style a nav element only on screens smaller than 480px. Which CSS snippet correctly does this using a mobile-first approach?

A nav { font-size: 1.2rem; } @media (min-width: 480px) { nav { font-size: 1rem; } }

B @media (min-width: 480px) { nav { font-size: 1.2rem; } }

C @media (max-width: 479px) { nav { font-size: 1.2rem; } }

D nav { font-size: 1rem; } @media (max-width: 479px) { nav { font-size: 1.2rem; } }

💡 Hint

Mobile-first means base styles for small screens, then bigger screen overrides.

Option A sets the base font size for mobile (small screens). Then it uses @media (min-width: 480px) to reduce font size for bigger screens. This matches mobile-first principles.

❓ accessibility

expert

How does mobile-first CSS improve accessibility?

Which statement best explains how a mobile-first CSS approach can help users with disabilities?

A It hides content on mobile devices to reduce cognitive load.

B It disables animations on mobile devices to reduce distractions.

C It automatically adds ARIA labels to all elements for screen readers.

D It ensures simpler layouts and larger touch targets on small screens, aiding users with motor impairments.

💡 Hint

Think about how mobile design affects ease of use for everyone.

Mobile-first design encourages simple layouts and bigger buttons for small screens. This helps users with motor difficulties by making controls easier to tap and content easier to read.