Mobile-first approach in CSS - Mini Project: Build & Apply

Mobile-First Responsive Layout with CSS

📖 Scenario: You are building a simple webpage that looks great on small mobile screens first, then adjusts for larger screens like tablets and desktops.

🎯 Goal: Create a mobile-first CSS style that sets a background color and font size for small screens, then changes these styles for screens wider than 600px and 900px using media queries.

📋 What You'll Learn

Use a mobile-first approach in CSS

Set a background color and font size for the body on small screens

Add a media query for screens wider than 600px to change background color and font size

Add a media query for screens wider than 900px to change background color and font size

Use rem units for font sizes

Ensure the CSS is valid and applies styles correctly

💡 Why This Matters

🌍 Real World

Mobile-first CSS is essential for building websites that look good on phones and tablets before scaling up to desktops.

💼 Career

Web developers use mobile-first design to create responsive websites that provide a great user experience on all devices.

1

Set base styles for mobile screens

Write CSS to set the body background color to #f0f8ff and font size to 1.2rem for small mobile screens.

CSS

/* Set mobile base styles for body */
/* Your code here */

Hint

Start by styling the body selector with the background color and font size for mobile.

2

Add media query for tablets (min-width 600px)

Add a CSS media query for screens with a minimum width of 600px. Inside it, set the body background color to #add8e6 and font size to 1.4rem.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

/* Add media query for min-width 600px */
/* Your code here */

Hint

Use @media (min-width: 600px) and inside it style the body with the new background and font size.

3

Add media query for desktops (min-width 900px)

Add another CSS media query for screens with a minimum width of 900px. Inside it, set the body background color to #87ceeb and font size to 1.6rem.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  body {
    background-color: #add8e6;
    font-size: 1.4rem;
  }
}

/* Add media query for min-width 900px */
/* Your code here */

Hint

Use @media (min-width: 900px) and inside it style the body with the new background and font size.

4

Complete and verify the mobile-first CSS

Ensure the CSS code includes the base mobile styles and both media queries for 600px and 900px screen widths with the correct background colors and font sizes as specified.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  body {
    background-color: #add8e6;
    font-size: 1.4rem;
  }
}

@media (min-width: 900px) {
  body {
    background-color: #87ceeb;
    font-size: 1.6rem;
  }
}

/* Verify all styles are present and correct */
/* Your code here */

Hint

Check that all three style blocks are included exactly as specified.

Practice

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