Bird
Raised Fist0
CSSmarkup~5 mins

Mobile-first approach in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

The mobile-first approach means designing websites starting with small screens first. This helps make sure the site works well on phones before adding styles for bigger screens.

When building a website that should look good on phones and tablets.
When you want your site to load faster on mobile devices.
When you want to improve user experience for people using small screens.
When you want to make your website responsive and easy to read everywhere.
When you want to organize your CSS in a simple, logical way.
Syntax
CSS
@media (min-width: 600px) {
  /* styles for screens 600px and wider */
}
Start by writing CSS for small screens without media queries.
Use @media (min-width: ...) to add styles for larger screens.
Examples
This example sets basic styles for mobile first. Then it changes font size and background color for screens wider than 600 pixels.
CSS
/* Base styles for mobile */
body {
  font-size: 1rem;
  background-color: white;
}

/* Larger screens */
@media (min-width: 600px) {
  body {
    font-size: 1.2rem;
    background-color: lightgray;
  }
}
The button is smaller on mobile and bigger on tablets or desktops.
CSS
/* Mobile first button style */
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  button {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }
}
Sample Program

This page uses the mobile-first approach. The base styles are for small screens. When the screen is at least 600 pixels wide, the styles inside the media query make the text bigger, add background color, and make the button larger.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mobile-first Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333333;
      padding: 1rem;
      font-size: 1rem;
    }
    header {
      background-color: #007acc;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
    }
    main {
      margin-top: 1rem;
    }
    button {
      background-color: #007acc;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 0.3rem;
      cursor: pointer;
    }
    button:hover {
      background-color: #005f99;
    }
    /* Larger screens styles */
    @media (min-width: 600px) {
      body {
        background-color: #f0f4f8;
        font-size: 1.125rem;
      }
      header {
        padding: 2rem;
        border-radius: 1rem;
      }
      button {
        padding: 1rem 2rem;
        font-size: 1.25rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Mobile-first Site</h1>
  </header>
  <main>
    <p>This page looks good on phones first, then adjusts for bigger screens.</p>
    <button>Click Me</button>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always include the meta viewport tag in your HTML to make mobile styles work correctly.

Write your CSS starting with the smallest screen styles first, then add media queries for bigger screens.

Test your site on different devices or use browser DevTools to see how it looks on various screen sizes.

Summary

Mobile-first means start styling for small screens first.

Use @media (min-width: ...) to add styles for bigger screens.

This approach helps your site work well on phones and desktops.

Practice

(1/5)
1. What does the mobile-first approach in CSS mean?
easy
A. Write all styles without using media queries
B. Start styling for small screens first, then add styles for larger screens
C. Start styling for desktop screens first, then add styles for smaller screens
D. Only style for mobile devices and ignore desktops

Solution

  1. Step 1: Understand mobile-first approach

    Mobile-first means you write CSS targeting small screens first, like phones.

  2. Step 2: Add styles for bigger screens

    Then you use media queries with min-width to add or change styles for tablets and desktops.

  3. Final Answer:

    Start styling for small screens first, then add styles for larger screens -> Option B

  4. Quick Check:

    Mobile-first = Start small, add bigger [OK]
Hint: Think: style phones first, then bigger screens [OK]
Common Mistakes:
  • Confusing mobile-first with desktop-first
  • Using max-width instead of min-width for bigger screens
  • Ignoring media queries completely
2. Which CSS syntax correctly applies styles for screens wider than 600px in a mobile-first approach?
easy
A. @media (max-width: 600px) { ... }
B. @media (width: 600px) { ... }
C. @media screen and (min-width: 600px) { ... }
D. @media screen and (max-width: 600px) { ... }

Solution

  1. Step 1: Identify mobile-first media query

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

  2. Step 2: Choose correct syntax with media type

    Using @media screen and (min-width: 600px) targets screens wider than 600px correctly.

  3. Final Answer:

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

  4. Quick Check:

    Mobile-first uses min-width with media type [OK]
Hint: Use min-width for bigger screens in mobile-first [OK]
Common Mistakes:
  • Using max-width instead of min-width for bigger screens
  • Using 'width' instead of 'min-width'
  • Confusing min-width and max-width
3. Given this CSS, what background color will a 700px wide screen see? 
body { background: white; }
@media (min-width: 600px) { body { background: blue; } }
@media (min-width: 800px) { body { background: green; } }
medium
A. Blue
B. White
C. Green
D. No background color

Solution

  1. Step 1: Check base style

    Base background is white for all screen sizes.

  2. Step 2: Check media queries for 700px width

    700px is >= 600px but < 800px, so blue applies, green does not.

  3. Final Answer:

    Blue -> Option A

  4. Quick Check:

    700px triggers min-width 600px but not 800px [OK]
Hint: Check which min-width media query matches screen size [OK]
Common Mistakes:
  • Choosing green because 700 > 600 but ignoring 800px limit
  • Choosing white ignoring media queries
  • Confusing min-width with max-width
4. What is wrong with this mobile-first CSS snippet? 
body { font-size: 14px; }
@media (max-width: 600px) { body { font-size: 16px; } }
medium
A. It uses max-width instead of min-width for bigger screens
B. No error, this is correct mobile-first CSS
C. The base font size should be larger than media query size
D. Media query should use min-width for mobile-first approach

Solution

  1. Step 1: Identify media query type

    The snippet uses max-width: 600px, which targets small screens.

  2. Step 2: Check mobile-first rule

    Mobile-first uses base styles for small screens and min-width for bigger screens, so this is reversed.

  3. Final Answer:

    Media query should use min-width for mobile-first approach -> Option D

  4. Quick Check:

    Mobile-first uses min-width, not max-width [OK]
Hint: Mobile-first uses min-width, max-width is desktop-first [OK]
Common Mistakes:
  • Thinking max-width is correct for mobile-first
  • Ignoring base styles importance
  • Assuming no error in reversed media query
5. You want a button to have 100% width on phones and 200px width on screens wider than 768px. Which CSS correctly uses mobile-first approach?
hard
A. button { width: 100%; } @media (min-width: 768px) { button { width: 200px; } }
B. button { width: 200px; } @media (max-width: 768px) { button { width: 100%; } }
C. button { width: 100%; } @media (max-width: 768px) { button { width: 200px; } }
D. button { width: 200px; } @media (min-width: 768px) { button { width: 100%; } }

Solution

  1. Step 1: Set base style for small screens

    Mobile-first means base style is for phones, so width 100% is base.

  2. Step 2: Use min-width media query for bigger screens

    Use @media (min-width: 768px) to set width 200px for larger screens.

  3. Final Answer:

    button { width: 100%; } @media (min-width: 768px) { button { width: 200px; } } -> Option A

  4. Quick Check:

    Base small, min-width bigger = mobile-first [OK]
Hint: Base styles for mobile, min-width for bigger screens [OK]
Common Mistakes:
  • Using max-width for bigger screens
  • Setting desktop styles as base
  • Reversing widths in media queries