Mobile-first approach in CSS - Browser Rendering Trace

Render Flow - Mobile-first approach

Write base CSS for small screens

↓

Browser applies base styles

↓

Read media queries with min-width

↓

Apply styles for larger screens

↓

Render final layout responsive to screen size

The browser first applies the base CSS designed for small screens. Then it reads media queries with min-width to add or override styles for larger screens, creating a responsive design that grows from mobile to desktop.

Render Steps - 2 Steps

Code Added:header { background-color: lightblue; padding: 1rem; text-align: center; }

Before

[Empty page]

→

After

[header]
[________Welcome________]
[__________Menu_________]

The header appears with a light blue background, some padding around the text, and the text is centered horizontally.

🔧 Browser Action:Parse CSS, create box for header, apply background, padding, and text alignment, then paint.

Code Sample

A header with a light blue background and centered text on small screens that changes to light green background and left-aligned text with more padding on screens wider than 600px.

CSS

<header>
  <h1>Welcome</h1>
  <nav>Menu</nav>
</header>

CSS

header {
  background-color: lightblue;
  padding: 1rem;
  text-align: center;
}

@media (min-width: 600px) {
  header {
    background-color: lightgreen;
    text-align: left;
    padding: 2rem;
  }
}

Render Quiz - 3 Questions

After applying step 1, how is the header text aligned?

A Centered horizontally

B Left aligned

C Right aligned

D Justified

Common Confusions - 2 Topics

Why does the header style not change on small screens?

Because the media query uses min-width: 600px, styles inside it only apply when the screen is 600px or wider. On smaller screens, only the base styles apply (step 1).

💡 Media queries with min-width add styles for bigger screens, base styles are for small screens.

What happens if I reverse the order of base styles and media queries?

If media queries come before base styles, the base styles might override them, so the responsive effect breaks. The mobile-first approach puts base styles first, then media queries to override.

💡 Write base styles first, then media queries to override for bigger screens.

Property Reference

Property	Value Applied	Effect on Layout	Common Use
background-color	lightblue / lightgreen	Changes background color of element	Visual distinction between screen sizes
padding	1rem / 2rem	Adds space inside element edges	Improves spacing and touch targets
text-align	center / left	Aligns inline content horizontally	Adjusts text alignment for readability
@media (min-width: 600px)	Condition for screen width	Applies styles only if screen is wider than 600px	Responsive design for larger screens

Concept Snapshot

Mobile-first approach means: - Write base CSS for small screens first - Use @media (min-width) to add styles for larger screens - Base styles apply to all, media queries override on bigger devices - Helps create responsive designs that grow with screen size - Common properties: padding, background-color, text-align - Keeps CSS simple and efficient for mobile users

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