Mobile-first approach in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the base font size for mobile devices.

CSS

body { font-size: [1]; }

Drag options to blanks, or click blank then click option'

A16rem

B16px

C100px

D1em

Attempts:

3 left

💡 Hint

Common Mistakes

Using rem or em units without understanding their base.

Setting font size too large like 100px.

The base font size for mobile devices is commonly set using 16px for readability and consistency.

2fill in blank

medium

Complete the media query to apply styles for screens wider than 600px.

CSS

@media (min-width: [1]) { body { background-color: lightblue; } }

Drag options to blanks, or click blank then click option'

A800px

B400px

C600px

D1000px

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width.

Choosing a wrong pixel value like 400px.

The media query uses min-width: 600px to target devices wider than 600 pixels, typically tablets and desktops.

3fill in blank

hard

Fix the error in the media query syntax for mobile-first design.

CSS

@media [1] (max-width: 599px) { p { font-size: 14px; } }

Drag options to blanks, or click blank then click option'

Aonly screen and

Bmax-width:

Cmin-width:

Dscreen and

Attempts:

3 left

💡 Hint

Common Mistakes

Using only max-width without media type.

Using min-width instead of max-width here.

The correct syntax for media queries includes only screen and before the condition for better browser support and clarity.

4fill in blank

hard

Fill both blanks to create a mobile-first media query that changes the layout for larger screens.

CSS

@media [1] ([2]: 768px) { .container { display: flex; } }

Drag options to blanks, or click blank then click option'

Aonly screen and

Bmin-width

Cmax-width

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width for mobile-first.

Omitting 'only screen and' causing less compatibility.

The media query uses only screen and with min-width: 768px to apply styles on screens 768px and wider, following mobile-first approach.

5fill in blank

hard

Fill all three blanks to create a responsive font size that increases on larger screens.

CSS

html { font-size: [1]; } @media [2] ([3]: 900px) { html { font-size: 18px; } }

Drag options to blanks, or click blank then click option'

A16px

Bonly screen and

Cmin-width

Dmax-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width for larger screens.

Forgetting to include media type in the query.

The base font size is set to 16px for mobile. The media query uses only screen and min-width: 900px to increase font size on larger screens.

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